Структура HTML-документа презентация

Содержание

Слайд 2

Doctype в HTML, тип документа Каждый HTML-документ начинается с декларации

Doctype в HTML, тип документа

Каждый HTML-документ начинается с декларации типа документа, или «доктайпа».
Тип

документа необходим, чтобы браузер мог определить версию HTML и правильно отобразить страницу.
Слайд 3

Doctype в HTML, тип документа Доктайп для старой версии HTML

Doctype в HTML, тип документа

Доктайп для старой версии HTML :

"-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
Для современной версии HTML :

Слайд 4

Doctype в HTML, тип документа

Doctype в HTML, тип документа

Слайд 5

Основные теги HTML Простейшая HTML-страница состоит как минимум из трёх тегов:

Основные теги HTML

Простейшая HTML-страница состоит как минимум из трёх тегов:

 

Слайд 6

Основные теги HTML Тег - располагается после доктайпа - Содержит

Основные теги HTML

Тег  
- располагается после доктайпа
- Содержит остальные теги, включая  и .
Атрибут

тега 
lang
(сокращение от английского «language»)
задаёт язык документа
Пример:
Слайд 7

Основные теги HTML Примечание Атрибут lang можно задавать любым тегам,

Основные теги HTML

Примечание
Атрибут lang можно задавать любым тегам, если нужно уточнить, на каком языке

написан текст внутри тега.
Если задать атрибут lang тегу , то его действие распространится на документ целиком.
Слайд 8

Основные теги HTML Тег - хранит служебную информацию Тег -

Основные теги HTML

Тег  
- хранит служебную информацию
Тег  
- хранит содержание страницы, которое отображается

в окне браузера
В документе теги head и body могут быть использованы только один раз.
Слайд 9

Тег head, служебная информация Тег - располагается первым в теге

Тег head, служебная информация

Тег  
- располагается первым в теге , сразу перед 
- предназначен для

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

Тег title, заголовок страницы Тег - располагается в - в

Тег title, заголовок страницы

Тег  <br>- располагается в <head> <br>- в нём задаётся заголовок страницы,</div></h2><div class="slides-content">который отображается во вкладках браузера.<br>Пример использования:<br><head><br> <title>Мой первый сайт

Слайд 11

Основные теги HTML Рассмотрим теги, которые определяют структуру страниц на

Основные теги HTML

Рассмотрим теги,
которые определяют структуру страниц
на уровне крупных блоков:
введение;
основное содержание;
заключение

и так далее.
Слайд 12

Тег main, основное содержание Тег - выделяет основное содержание страницы,

Тег main, основное содержание

Тег 

 
- выделяет основное содержание страницы, которое не повторяется на других

страницах
- обычно на странице используется один 

Пример использования:

Привет, я основной контент!

Слайд 13

Тег main, основное содержание Спецификация не допускает использование на одной

Тег main, основное содержание

Спецификация не допускает использование на одной странице более одного тега 

,

если у них нет специального атрибута hidden.
Атрибут hidden
- добавляется HTML-элементу, например, в одностраничных приложениях (Single Page Application), чтобы менять содержимое страницы, делая видимым тот или иной 
 в разных состояниях приложения.
Слайд 14

Тег main, основное содержание Атрибут hidden - указывает браузеру, что

Тег main, основное содержание

Атрибут hidden
- указывает браузеру, что элемент не должен отображаться

и использоваться в момент, когда отображается и используется содержимое другого 
.
Слайд 15

Теги header и footer, шапка и подвал На странице кроме

Теги header и footer, шапка и подвал

На странице кроме уникального основного содержимого,
есть повторяющиеся

на других страницах
вводная часть и заключительная часть.
«шапка» «подвал»
тег 
тег 

Слайд 16

Теги header и footer, шапка и подвал Я шапка сайта.

Теги header и footer, шапка и подвал


Я шапка сайта. Могу повторяться на

других страницах.


Я основной контент!


Я подвал сайта, я как шапка.

Слайд 17

Теги header и footer, шапка и подвал Обычно на странице

Теги header и footer, шапка и подвал

Обычно на странице по одному тегу 

 и 
, но их может быть и больше.
Тег 

-

это не только шапка сайта с логотипом и меню
- может использоваться, например, и как «шапка» какой-нибудь статьи или раздела сайта
Слайд 18

Теги header и footer, шапка и подвал С ситуация аналогичная.

Теги header и footer, шапка и подвал

С 

 ситуация аналогичная.
Тег

- обычно это подвал

сайта, с копирайтами, контактной информацией и т.д.
- может использоваться в других разделах сайта. Например, внутри статьи в «подвале» можно разместить дополнительную информацию: данные об авторе, дополнительные ссылки и так далее.
Слайд 19

Тег section, смысловой раздел Тег обозначает крупный смысловой (или «логический») раздел. Пример: Раздел 1 Раздел 2

Тег section, смысловой раздел

Тег


обозначает крупный смысловой (или «логический») раздел.
Пример:

Раздел 1


Раздел

2
 
Слайд 20

Тег section, смысловой раздел Пример использования - разделение книги на

Тег section, смысловой раздел

Пример использования 

 - разделение книги на главы, название главы описывает

её содержание.
Как отличать логические разделы от
структурных разделов?
Логический раздел можно осмысленно назвать одним словом или словосочетанием:
«программа обучения»,
«каталог»,
«наши преимущества» и т.п.
Слайд 21

Тег nav, основная навигация Тег (сокращение от английского «navigation») -

Тег nav, основная навигация

Тег 

основной навигацией.
- обычно в 
Слайд 22

Тег article, независимый раздел Тег - обозначает цельный, законченный и

Тег article, независимый раздел

Тег 


- обозначает цельный, законченный и самостоятельный фрагмент информации.
в отличие от 
,

можно убрать из одного места и вставить в другое (на другую страницу сайта или на другой сайт), и смысл содержимого тега при этом не потеряется.
Примеры: статья, пост в блоге, сообщение на форуме и так далее.
Слайд 23

Тег article, независимый раздел Теги можно использовать внутри , если

Тег article, независимый раздел

Теги 

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

смысловые блоки.
Аналогично теги 
  можно использовать внутри  
, если в логическом разделе документа содержатся независимые контентные блоки.
Слайд 24

Тег aside, дополнительное содержание Тег включает в себя дополнительное содержание,

Тег aside, дополнительное содержание

Тег 

часто называют «сайдбарами» или боковыми панелями.
Пример:

Слайд 25

Теги h1-h6, заголовки в HTML Для создания основной структуры текста

Теги h1-h6, заголовки в HTML

Для создания основной структуры текста используют заголовки.
В HTML существует

семейство заголовочных тегов: от 

 до 

.
Тег 


обозначает самый важный заголовок (заголовок верхнего уровня),
Тег 


обозначает подзаголовок самого нижнего уровня.
Буква «h» первая буква английского «heading»
Слайд 26

Теги h1-h6, заголовки в HTML На практике в текстах редко

Теги h1-h6, заголовки в HTML

На практике в текстах редко встречаются подзаголовки ниже третьего уровня.
Чаще

всего используются теги

, 

 и 

.
Пример:

Спецификация HTML


Раздел 1 Введение


Раздел 1.1 Происхождение языка


Слайд 27

Теги h1-h6, заголовки в HTML Поисковые системы придают особое значение

Теги h1-h6, заголовки в HTML

Поисковые системы придают особое значение заголовкам.
Правильно расставленные заголовки

важны для доступности документа.
Поэтому нужно учиться грамотно использовать заголовки.
Заголовок 

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

Слайд 28

Теги h1-h6, заголовки в HTML Поисковые системы придают особое значение

Теги h1-h6, заголовки в HTML

Поисковые системы придают особое значение заголовкам.
Правильно расставленные заголовки

важны для доступности документа.
Поэтому нужно учиться грамотно использовать заголовки.
Заголовок 

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

Слайд 29

Тег p, параграф Тег p, параграф Основную структуру текста создают

Тег p, параграф

Тег p, параграф
Основную структуру текста создают с помощью заголовков, а более

мелкую выстраивают с помощью параграфов (или абзацев).
Для разметки параграфов предназначен тег 

 (от английского «paragraph»).
По умолчанию абзацы начинаются с новой строки и отделяются от остального контента отступами сверху и снизу.

Слайд 30

Тег meta, кодировка страницы Тег - включается в - одиночный

Тег meta, кодировка страницы

Тег 
- включается в 
- одиночный тег (не требует парного закрывающего

тега в конце)
- используется для того, чтобы сообщать браузеру, поисковому роботу или другому устройству различную служебную информацию (или метаинформацию) о сайте:
кодировку текста,
описание контента и т.д.
Слайд 31

Тег meta, кодировка страницы Атрибуты тега - charset указывается кодировка

Тег meta, кодировка страницы

Атрибуты тега 
- charset
указывается кодировка текста HTML-страницы:

Самая

распространённая кодировка - utf-8.
Раньше часто использовали - windows-1251.
Атрибуты content, http-equiv, name, scheme
(самостоятельно)
Слайд 32

Тег meta, ключевые слова Атрибуты тега - name и content

Тег meta, ключевые слова

Атрибуты тега 
- name и content
Перечень ключевых слов задаётся

тегом , у которого атрибут name имеет значение keywords.
Ключевые слова перечисляются в атрибуте content через запятую.
Пример:

Слайд 33

Тег meta, краткое описание страницы Атрибуты тега - name и

Тег meta, краткое описание страницы

Атрибуты тега 
- name и content
Краткое описание

страницы задаётся аналогичным образом: name="description.
Пример:

Краткое описание (или аннотация) страницы часто используется поисковиками при отображении результатов поиска.
Имя файла: Структура-HTML-документа.pptx
Количество просмотров: 189
Количество скачиваний: 1
- Предыдущая
Kaliningrad. A Russian city with a German past
Следующая -
Қостөбе қаласы (Жамұқат) VI-XIII ғасырдың басы

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

Технологии программирования
Программное обеспечение компьютерной графики. Системы координат OpenGL
Комплексная автоматизированная система управления хозяйством централизации, сигнализации и блокировки второго поколения
Базы данных. Основы баз данных
Теоретические основы разработки базы данных технического состояния зданий и сооружений
Сервисы Google
Смарт-контракт. Удалённое управление собственным имуществом
Профстандарт учителя. ИКТ – компетентность учителя русского языка и литературы
Internet
Операционные системы реального времени для интеллектуальных информационных систем
Цифровая платформа Эталон
Електронне листування з використанням веб-інтерфейсу. Вкладені файли
Современные методы и техники выведывания информации
Конспект урока информатики на тему Создание графических изображений
Стандарты в области компьютерной графики
Электронная почта
Partnership System ZORAN
Разработка программ управления компьютером
Introduction to informational and communication technologies
TARSIA- компьютерлік бағдарлама
Презентация Оператор ветвления Case
Производственная технологическая практика. Учет запасных частей
Рекомендации психолога
Теоретические основы информатики
Тестовое задание для дизайнера:
Підсумки з теми Електронне спілкування. 4 клас
Язык программирования Java
Особенности редакторов векторной и растровой графики
Обратная связь
Email: Нажмите что бы посмотреть