Что такое 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
  • Количество просмотров: 230
  • Количество скачиваний: 0
- Предыдущая Задача Пуассона
Следующая - Спрос и предложение. Установление рыночной цены

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

Летний оздоровительный период - 2017 материал (старшая группа) по теме Летний оздоровительный период - 2017 материал (старшая группа) по теме 153
hochu byt kosmonavtom hochu byt kosmonavtom 115
презентация презентация к уроку презентация презентация к уроку 111
Курсовой проект Аудитория Курсовой проект Аудитория 133
Презентация к уроку СБО в 5 классе Приготовление бутербродов Презентация к уроку СБО в 5 классе Приготовление бутербродов 209
Практическое занятие Правовой статус таможенных органов Практическое занятие Правовой статус таможенных органов 102
Брат и сестра! Брат и сестра! 109
Химическая технология:что нового? Химическая технология:что нового? 97
Презентация Проект вода презентация Презентация Проект вода презентация 118
Презентация по дизайну интерьера на тему Цвет в интерьере Презентация по дизайну интерьера на тему Цвет в интерьере 132
ОСТРЫЙ ЖИВОТ: ТАКТИКА ВРАЧА ОБЩЕЙ ПРАКТИКИ ОСТРЫЙ ЖИВОТ: ТАКТИКА ВРАЧА ОБЩЕЙ ПРАКТИКИ 332
Почему ребенок плохо учится презентация к уроку (1 класс) Почему ребенок плохо учится презентация к уроку (1 класс) 107
Қазақ тілі пәнінен Киім дүкенінде тақырыбы бойынша презентациясы (6-сынып) Қазақ тілі пәнінен Киім дүкенінде тақырыбы бойынша презентациясы (6-сынып) 213
Классный час по теме: Моя малая Родина классный час (2 класс) Классный час по теме: Моя малая Родина классный час (2 класс) 117
Разноцветные дни материал (средняя группа) Разноцветные дни материал (средняя группа) 104
Немного юмора – 4 Немного юмора – 4 99
Технология производства кисломолочной продукции Технология производства кисломолочной продукции 117
Презентация Использование неоформленного материала в самостоятельной деятельности дошкольника презентация Презентация Использование неоформленного материала в самостоятельной деятельности дошкольника презентация 121
Синдром Патау. Синдром Патау. 131
Презентация по осетинской литературе на тему Нартский Эпос Презентация по осетинской литературе на тему Нартский Эпос 170
Спасо-Евфимиев мужской монастырь  Спасо-Евфимиев мужской монастырь  143
Мой ЛЮБИМЫЕ СКАЗКИ Мой ЛЮБИМЫЕ СКАЗКИ 98
Презентация Моторное развитие детей дошкольного возраста в ДОО презентация Презентация Моторное развитие детей дошкольного возраста в ДОО презентация 113
zdorovesberegayushchaya tehnologiya zdorovesberegayushchaya tehnologiya 125
Что означают наши имена Что означают наши имена 96
Родительское собрание Сознательная дисциплина презентация урока для интерактивной доски (1 класс) Родительское собрание Сознательная дисциплина презентация урока для интерактивной доски (1 класс) 224
Механизация приготовления концентрированных кормов в УНИЦ Агротехнопарк ФГБОУ ВО РГАТУ Рязанского района Рязанской области Механизация приготовления концентрированных кормов в УНИЦ Агротехнопарк ФГБОУ ВО РГАТУ Рязанского района Рязанской области 147
Особенности работы с одаренными детьми методическая разработка Особенности работы с одаренными детьми методическая разработка 108
Топографическая анатомия пищевода Топографическая анатомия пищевода 124
Загадки на 1 сентября Загадки на 1 сентября 146