Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.

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

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

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

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

Презентация на тему Основы html

Содержание

Рассматриваемые вопросыЧто собой представляют веб-страницы изнутри?Язык HTML:определениекраткая историяпример простого документатеги, вложенность теговатрибуты тегов
Основы HTMLПринципы гипертекстовой разметки Рассматриваемые вопросыЧто собой представляют веб-страницы изнутри?Язык HTML:определениекраткая историяпример простого документатеги, вложенность теговатрибуты тегов Определение веб-страницыВеб-страница (ВС, англ. Web page) – документ (файл) или информационный ресурс Веб-страницыДля того, чтобы веб-страницы были доступны через Интернет они должны храниться на Веб-страницы (ВС)Внешне ВС могут выглядеть очень пёстро и включать различные элементы: текст Создание ВСДля создания ВС (форматирования их содержимого) используется специальный язык HTMLСуществуют специальное Определение HTMLHTML (от англ. HyperText Markup Language — «язык разметки гипертекста») - История HTMLВ 1989 г Тим Бернерс Ли предложил CERN проект распределённой гипертекстовой Особенности HTMLHTML-документ:передаётся клиенту в ответ на его запрос по протоколу HTTPОбрабатывается (интерпретируется) Пример простого документа Мой первый документ Ура! Это Разбор примераHTML-код содержит текст и специальные команды, заключённые в угловые скобки () Разбор примера - тег заголовка 1-го уровня, по умолчанию отображается браузером как Вложенность теговодни теги могут быть вложены в другиевнутренние теги иногда называются дочерними, Вложенность теговСначала нужно закрывать дочерний тег, затем – родительскийНеправильно:Правильно: Уровней вложенности может Структура документаКаждый правильный HTML-документ должен иметь:корневой элемент – тег …заголовок («голову») – Заголовок Контейнер для других служебных теговНе отображается визуальноСлужит для настройки параметров страницы:заглавие Заголовок Подключение внешних файлов:иконка сайта (favicon) – каскадные таблицы стилей CSSсценарии JavaScript и др. Тело Служит для вывода контента сайтаЯвляется контейнером для других видимых элементов сайта Атрибуты теговТеги могут иметь настройки, их значение устанавливается атрибутамиАтрибуты записываются внутри угловых Источники информацииЛомов А. HTML, CSS, скрипты: практика создания сайтов, С-Пб, «BHV», 2005 Справочник по тегам HTMLhttp://htmlbook.ru
Слайды презентации

Слайд 2 Рассматриваемые вопросы
Что собой представляют веб-страницы изнутри?
Язык HTML:
определение
краткая история
пример

Рассматриваемые вопросыЧто собой представляют веб-страницы изнутри?Язык HTML:определениекраткая историяпример простого документатеги, вложенность теговатрибуты тегов

простого документа
теги, вложенность тегов
атрибуты тегов

Слайд 3 Определение веб-страницы
Веб-страница (ВС, англ. Web page) –
документ

Определение веб-страницыВеб-страница (ВС, англ. Web page) – документ (файл) или информационный

(файл) или информационный ресурс Всемирной паутины,
имеющий уникальный адрес URL,
расположен

на жёстком диске веб-сервера
доступ к которому осуществляется с помощью веб-браузера.

Слайд 4 Веб-страницы
Для того, чтобы веб-страницы были доступны через Интернет

Веб-страницыДля того, чтобы веб-страницы были доступны через Интернет они должны храниться


они должны храниться на жёстком диске компьютера (сервера), имеющего

подключение к Интернет (желательно постоянное)

Слайд 5 Веб-страницы (ВС)
Внешне ВС могут выглядеть очень пёстро и

Веб-страницы (ВС)Внешне ВС могут выглядеть очень пёстро и включать различные элементы:

включать различные элементы: текст разного цвета и размера, картинки,

видео-ролики и т.п.
Внутри веб-страницы – это обычные текстовые файлы с расширением .HTM или .HTML
Создавать их можно с помощью любого текстового редактора (например, блокнота Windows)

Слайд 6 Создание ВС
Для создания ВС (форматирования их содержимого) используется

Создание ВСДля создания ВС (форматирования их содержимого) используется специальный язык HTMLСуществуют

специальный язык HTML
Существуют специальное ПО, облегчающее создание ВС:
MS Word,

MS FrontPage и др. WYSIWYG-редакторы (визуальные), можно создавать веб-страницы не зная HTML
Adobe Dreamweaver, NetBeans и др. системы разработки с подсветкой синтаксиса, возможностью работы над проектом, его публикации, всплывающие подсказки, проверка синтаксиса и т.п.

Слайд 7 Определение HTML
HTML (от англ. HyperText Markup Language —

Определение HTMLHTML (от англ. HyperText Markup Language — «язык разметки гипертекста»)

«язык разметки гипертекста») - стандартный язык разметки документов во

Всемирной паутине.
Язык HTML интерпретируется браузерами и отображается в виде визуального документа в удобной для человека форме.
HTML – не язык программирования

Слайд 8 История HTML
В 1989 г Тим Бернерс Ли предложил

История HTMLВ 1989 г Тим Бернерс Ли предложил CERN проект распределённой

CERN проект распределённой гипертекстовой системы (БД)
Созданные им язык HTML

и протокол HTTP легли в основу WWW
Две противоречивые задачи, стоящие перед HTML:
Обеспечить разработчиков простым средством
Создать мощное средство для создания интерфейсов гипертекстовых БД
Версии:
HTML 2 – 1995г
HTML 3.2 – 1997г
HTML 4.01 – 1999г
XHTML (1.0, 1.1, 2.0) – 1998 – 2009 гг
HTML 5 – в разработке до 2014г, но уже поддерживается браузерами

Слайд 9 Особенности HTML
HTML-документ:
передаётся клиенту в ответ на его запрос

Особенности HTMLHTML-документ:передаётся клиенту в ответ на его запрос по протоколу HTTPОбрабатывается

по протоколу HTTP
Обрабатывается (интерпретируется) и визуализируется (отображается) браузером на

стороне клиента
Браузер не выводит сообщения об ошибках в коде HTML, он их просто игнорирует
Поддержкой и развитием WWW и HTML занимается консорциум всемирной паутины (W3C)


Слайд 10 Пример простого документа



Мой первый

Пример простого документа Мой первый документ Ура! Это мой

документ



Ура!
Это мой первый

документ на
языке HTML




Слайд 11 Разбор примера
HTML-код содержит текст и специальные команды, заключённые

Разбор примераHTML-код содержит текст и специальные команды, заключённые в угловые скобки

в угловые скобки () – теги языка HTML


регистр символов

в именах тегов не важен (в HTML5) -

и

- одно и то же
Некоторые теги состоят из 2х частей – открывающего и закрывающего (

…

)
Их называют парными тегами. Между ними находится содержимое тега – текст или другие (вложенные) теги

Ура!


Это мой первый документ на
языке HTML


Слайд 12 Разбор примера
- тег заголовка 1-го уровня, по

Разбор примера - тег заголовка 1-го уровня, по умолчанию отображается браузером

умолчанию отображается браузером как большой жирный текст
- тег

параграфа, отделяется отступами до и после содержимого этого тега.
- выделение текста жирным (акцент)
- курсив

Ура!


Это мой первый документ на
языке HTML


Слайд 13 Вложенность тегов
одни теги могут быть вложены в другие
внутренние

Вложенность теговодни теги могут быть вложены в другиевнутренние теги иногда называются

теги иногда называются дочерними, а объемлющие - родительскими
при этом

действия дочерних тегов как бы добавляются, «наслаиваются» на действие родительских
Сначала нужно закрывать

Это мой первый документ на языке HTML


Слайд 14 Вложенность тегов
Сначала нужно закрывать дочерний тег, затем –

Вложенность теговСначала нужно закрывать дочерний тег, затем – родительскийНеправильно:Правильно: Уровней вложенности

родительский
Неправильно:


Правильно:


Уровней вложенности может быть неограниченно много (как «матрёшка»)
Это

мой первый документ на языке HTML


Это мой первый документ на языке HTML


Слайд 15 Структура документа
Каждый правильный HTML-документ должен иметь:
корневой элемент –

Структура документаКаждый правильный HTML-документ должен иметь:корневой элемент – тег …заголовок («голову»)

тег …
заголовок («голову») – тег …
тело документа – тег

…
Можно указать версию стандарта, кот. соответствует документ – тег
- 5-я версия HTML




Мой первый документ



…


Слайд 16 Заголовок
Контейнер для других служебных тегов
Не отображается визуально
Служит

Заголовок Контейнер для других служебных теговНе отображается визуальноСлужит для настройки параметров

для настройки параметров страницы:
заглавие – тег …
мета-теги:
кодировка (

/>)
описание страницы ()
ключевые слова (автор и т.д.

Слайд 17 Заголовок
Подключение внешних файлов:
иконка сайта (favicon) –

Заголовок Подключение внешних файлов:иконка сайта (favicon) – каскадные таблицы стилей CSSсценарии JavaScript и др.

rel="shortcut icon" href="/img/favicon.ico">
каскадные таблицы стилей CSS
сценарии JavaScript и

др.

Слайд 18 Тело
Служит для вывода контента сайта
Является контейнером для

Тело Служит для вывода контента сайтаЯвляется контейнером для других видимых элементов

других видимых элементов сайта – тегов для форматирования текста,

графики и т.д.

Слайд 19 Атрибуты тегов
Теги могут иметь настройки, их значение устанавливается

Атрибуты теговТеги могут иметь настройки, их значение устанавливается атрибутамиАтрибуты записываются внутри

атрибутами
Атрибуты записываются внутри угловых скобок и отделяются пробелами
Атрибутов может

быть 0, 1 или более
Атрибуты могут иметь значение, кот. заключается в двойные кавычки и пишется после знака равенства “=“
Регистр букв в именах атрибутов не имеет значения
Атрибуты тегов бывают обязательными и опциональными (необязательными)



  • Имя файла: osnovy-html.pptx
  • Количество просмотров: 222
  • Количество скачиваний: 0
- Предыдущая Задача Пуассона
Следующая - Спрос и предложение. Установление рыночной цены

Похожие презентации

Презентация Музыкальные загадки презентация занятия для интерактивной доски (средняя группа) по теме Презентация Музыкальные загадки презентация занятия для интерактивной доски (средняя группа) по теме 123
Позициялы және пропорционал регуляторлардың реттеу әсерлері Позициялы және пропорционал регуляторлардың реттеу әсерлері 98
Russian language Russian language 139
Символы городов Тюменской области Символы городов Тюменской области 167
“Наследственные заболевания” “Наследственные заболевания” 82
Гидравлический пресс. Поршневой жидкостной насос Гидравлический пресс. Поршневой жидкостной насос 81
Основные сведения о бетонах Основные сведения о бетонах 108
Общественное телевидение и Радио в Российской Федерации Общественное телевидение и Радио в Российской Федерации 104
ТИпы и структура уроков презентация к уроку ТИпы и структура уроков презентация к уроку 115
Презентация Проблемы преемственности дошкольного и начального общего образования в условиях введения ФГОС презентация к уроку Презентация Проблемы преемственности дошкольного и начального общего образования в условиях введения ФГОС презентация к уроку 94
Презентация доказательства в ГПП Презентация доказательства в ГПП 205
Интерактивная игра Наши пернатые друзья презентация для интерактивной доски Интерактивная игра Наши пернатые друзья презентация для интерактивной доски 139
Инновационная деятельность в ДОУ в соответствии с ФГОС методическая разработка Инновационная деятельность в ДОУ в соответствии с ФГОС методическая разработка 126
Портфолио педагога - психолога учебно-методический материал Портфолио педагога - психолога учебно-методический материал 134
Презентация для торжественной линейки, посвященной празднованию 73-ей годовщины Победы в Великой Отечественной войне 1941-1945 Презентация для торжественной линейки, посвященной празднованию 73-ей годовщины Победы в Великой Отечественной войне 1941-1945 93
Давайте познакомимся Давайте познакомимся 137
Внутреннее строение Земли. план-конспект урока по теме Внутреннее строение Земли. план-конспект урока по теме 104
Место прохождение практики является филиал РНУ ПарабельОАО Центрсибнефтепровод, структурное подразделение ЛЭС Парабель Место прохождение практики является филиал РНУ ПарабельОАО Центрсибнефтепровод, структурное подразделение ЛЭС Парабель 98
Визитная карточка Я-педагог на конкурс Учитель года - 2018 презентация к уроку по теме Визитная карточка Я-педагог на конкурс Учитель года - 2018 презентация к уроку по теме 136
Разминка Разминка 87
Тілдік этикет қолданбалы курсы Презентация 10-сынып Тілдік этикет қолданбалы курсы Презентация 10-сынып 196
База отдыха и релакса Созвездие База отдыха и релакса Созвездие 93
презентация Информационно- коммуникационные технологии в развитии познавательных процессов, в том числе детей с ОВЗ. презентация к уроку (старшая, подготовительная группа) презентация Информационно- коммуникационные технологии в развитии познавательных процессов, в том числе детей с ОВЗ. презентация к уроку (старшая, подготовительная группа) 90
проект зимушка - зима проект проект зимушка - зима проект 94
Оригами и развитие мелкой моторики рук у дошкольников презентация к занятию (старшая группа) Оригами и развитие мелкой моторики рук у дошкольников презентация к занятию (старшая группа) 114
Коллективный проект Бездомные животные - проблема всех и каждого ( 4 класс) Коллективный проект Бездомные животные - проблема всех и каждого ( 4 класс) 134
Перспективное планирование календарно-тематическое планирование (младшая группа) Перспективное планирование календарно-тематическое планирование (младшая группа) 106
dhovnyy podvig aleksandra nevskogo dhovnyy podvig aleksandra nevskogo 120
Презентация 100 лучших людей Казахстана, Костанай Презентация 100 лучших людей Казахстана, Костанай 160
prezentatsiya microsoft powerpoint prezentatsiya microsoft powerpoint 93