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

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

Портфолио ученика начальных классов презентация к уроку (1 класс) Портфолио ученика начальных классов презентация к уроку (1 класс) 69
Адаптация первоклассников к обучению в школе консультация (1 класс) Адаптация первоклассников к обучению в школе консультация (1 класс) 88
Презентация по ветеринарной генетике Цитологические основы наследственности Презентация по ветеринарной генетике Цитологические основы наследственности 98
В. П. Шерстюко стратегии развития информационного общества в России В. П. Шерстюко стратегии развития информационного общества в России 81
Презентация к уроку ОРКСЭ Календари и праздники Презентация к уроку ОРКСЭ Календари и праздники 173
Мастер-класс Система работы по трудовому воспитанию дошкольников Ручной труд с детьми по пособию А.В. Белошистой Мастерилки. методическая разработка (старшая, подготовительная группа) Мастер-класс Система работы по трудовому воспитанию дошкольников Ручной труд с детьми по пособию А.В. Белошистой Мастерилки. методическая разработка (старшая, подготовительная группа) 45
Презентация по казакскому языку на тему Автоматты (пулеметті) бөлектеу және жинақтау (10класс) Презентация по казакскому языку на тему Автоматты (пулеметті) бөлектеу және жинақтау (10класс) 109
Основные аспекты содержания и методики АФК Основные аспекты содержания и методики АФК 86
Система диагностики метапредметных и личностных результатов презентация к уроку по теме Система диагностики метапредметных и личностных результатов презентация к уроку по теме 212
День славянской письменности День славянской письменности 65
Толерантность и гармонизация межнациональных отношений презентация Толерантность и гармонизация межнациональных отношений презентация 113
Европейский север освоение территорий Европейский север освоение территорий 98
Презентация Секреты цветов 2 часть Презентация Секреты цветов 2 часть 33
Викторина по Пермскому краю (6 класс) Викторина по Пермскому краю (6 класс) 172
УЧЕТ РОЗНИЧНОЙ И ОПТОВОЙ РЕАЛИЗАЦИИ ТОВАРА УЧЕТ РОЗНИЧНОЙ И ОПТОВОЙ РЕАЛИЗАЦИИ ТОВАРА 91
Презентация для родительского собрания Семья и школа. Роль семьи в воспитании ребенка презентация к уроку (2 класс) Презентация для родительского собрания Семья и школа. Роль семьи в воспитании ребенка презентация к уроку (2 класс) 86
Презентация Восприятие детей с 2 до 7 лет презентация Презентация Восприятие детей с 2 до 7 лет презентация 87
Систематизация и обобщение изученного по теме Однородные члены предложения Систематизация и обобщение изученного по теме Однородные члены предложения 138
Дорожные условия и особенности вождения транспортных средств при сельскохозяйственных перевозках Дорожные условия и особенности вождения транспортных средств при сельскохозяйственных перевозках 86
В гости в Простоквашино материал (средняя, старшая группа) В гости в Простоквашино материал (средняя, старшая группа) 26
Сказкотерапия презентация к уроку по теме Сказкотерапия презентация к уроку по теме 27
Фотоотчет День рождения РЖД материал (младшая группа) Фотоотчет День рождения РЖД материал (младшая группа) 88
Телефонная связь, часть I Телефонная связь, часть I 86
Расписание MOMK2 Расписание MOMK2 158
Творческий проект Мир вокруг меня через призму платковой куклы проект по теме Творческий проект Мир вокруг меня через призму платковой куклы проект по теме 107
rozhdestvo rozhdestvo 27
Самопрезентация презентация Самопрезентация презентация 85
Классный час В единстве наша сила (3 Класс) классный час (3 класс) Классный час В единстве наша сила (3 Класс) классный час (3 класс) 79
Проект Мы гордимся тобой Ленинград презентация к уроку (старшая группа) Проект Мы гордимся тобой Ленинград презентация к уроку (старшая группа) 90
Презентация Одарённые дети Красноярья Презентация Одарённые дети Красноярья 65