Блочная модель презентация

Блочная модель
В HTML все элементы можно представить в виде прямоугольных блоков. Для отображения блока, браузер вычисляет размеры его содержимого и применяет к блоку набор типовых свойств.
1
Таким образом, блочная модель является первым шагом к пониманию, как отображаются элементы в браузере. Знание блочной модели помогает строить отдельные блоки и компоновать их в веб-страницы, что и является основой вёрстки.
2

Тег
Тег
в HTML является блочным элементом верстки. Используется как контейнер для содержимого.
!
Для определения свойств блоков div используют каскадные таблицы стилей (CSS).
С помощью тега
обычно и создается внутренняя структура страницы.
Тег
может содержать вложенные
элементы в неограниченном количестве.
!
!
Содержимое
Слайд 4
Свойство box-sizing
Свойство box-sizing определяет, как вычисляется ширина и высота элемента: должны ли они
включать отступы и границы, или нет. Синтаксис: box-sizing: content-box | border-box | initial | inherit;
!
Слайд 5
HTML5 - семантические теги
Список основных семантических тегов:
!
Семантические элементы четко описывают,
что они означают, как браузеру, так и веб-разработчику.
В качестве примера не семантических элементов можно привести теги
и
. Они ничего не говорят о характере их контента.
Примеры семантических элементов:
, и
. Они четко описывают, какого характера контент они содержат.
!
Слайд 6
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
предназначен для определения
заголовочного блока или "шапки" документа или раздела.
Элемент
следует использовать как контейнер для вводной информации.
В одном документе разрешается определять несколько элементов
.
Элемент
определяет набор ссылок навигации.
Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента
. Элемент
предназначен только для основного блока навигационных ссылок.
Слайд 7
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
определяет некий контент,
находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар").
Контент внутри элемента
должен соотноситься с окружающим контентом.
Тег
определяет раздел документа, вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п.
По умолчанию рассматривается браузером как блочный элемент. Допускается вкладывать в элемент
другие элементы
.
Слайд 8
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Тег
определяет основное содержимое
документа.
Содержимое внутри элемента
должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, логотипов, поисковых форм и т.п.
В документе может быть только один элемент
, и он не должен быть вложен в элементы
,
,
,
или
.
Элемент
предназначен для определения "подвала" документа или раздела и должен содержать информацию о содержащим его элементе.
Обычно в "подвале" размещают информацию об авторе, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.
В одном документе разрешается определять несколько элементов
.
Слайд 9
HTML5 - семантические теги
2 группа – внешний шаблон страницы:
!
Элемент
определяет независимый, самодостаточный
контент.
Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
В качестве примеров использования элемента
могут выступать:
Публикация на форуме
Публикация в блоге
Газетная статья
Слайд 10
HTML5 - семантические теги
3 группа – элементы
и
:
!
Назначение элемента
-
добавление визуального пояснения к изображению.
В HTML5 изображение и пояснение к нему может быть сгруппировано в элементе
:
Элемент
определяет изображение, а элемент
пояснение к нему.
Слайд 11
HTML5 - семантические теги
4 группа – элементы
и
:
!
Тег
определяет дополнительную
информацию, которую пользователь может по желанию открыть или скрыть. Внутри тега
можно размещать любой контент.
Содержимое элемента
должно быть скрыто до тех пор, пока не будет установлен атрибут open.
Для определения видимого заголовка дополнительной информации в теге
используется элемент
. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.
Слайд 12
HTML5 - семантические теги
5 группа – элементы
и
:
!
Тег
определяет читаемую
человеком дату и время.
Этот элемент также может использоваться для кодирования дат и времени в машинно-читаемом виде, чтобы агенты пользователей могли предлагать добавлять напоминания о днях рождения или запланированные события в календарь пользователя, а поисковые системы могут создавать более умные результаты поиска.
Тег
определяет маркированный/выделенный текст.
Слайд 13
Свойства блока
Как мы уже знаем, любой элемент на веб-странице представляет собой прямоугольный блок,
который состоит из набора свойств.
!
Основой блока выступает его содержимое, ширина которого задается свойством width, а высота через height;
Вокруг содержимого идут поля (padding – внутренние отступы), они создают пустое пространство от содержимого до внутреннего края границ, затем идут границы (border), а вокруг границ внешние отступы (margin) — невидимое пустое пространство от внешнего края границ. Порядок этих свойств в блоке чётко определён.
!
!
Слайд 14
Свойство Padding
Свойство padding задаёт расстояние от внутреннего края границы или края блока до
воображаемого прямоугольника, ограничивающего содержимое блока.
!
Основное предназначение свойства padding - создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно ко краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы.
!
Слайд 15
Формат записи Padding
Padding достаточно универсальное свойство и у него может быть указано от
одного до четырех значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.
!
При указании одного значения данного свойства определяются поля для всех сторон блока.
!
Два значения: первое определяет поля сверху и снизу для элемента, второе значение слева и справа для элемента.
!
Три значения: первое задаст поле сверху для элемента, второе одновременно слева и справа, а третье снизу.
!
Слайд 16
Формат записи Padding
Четыре значения: первое определяет поле сверху, второе справа, третье снизу, четвёртое
слева.
!
Кроме того, есть свойства для каждой стороны отдельно - padding-top, padding-right, padding-bottom и padding-left.
!
Для информации!
Тег
используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования
!
Слайд 17
Свойство text-align
Часто используемые значения свойства text-align:
1
Слайд 18
Свойство text-decoration
Слайд 19
Свойство text-transform
Слайд 20
Свойство text-indent
Свойство text-indent используется для указания отступа первой строки текста:
1
Слайд 21
Свойство border
Часто используемые значения свойства border и примеры:
1
Слайд 22
Вид рамки
Вид рамки в зависимости от стиля и толщины границы элемента
1
Слайд 23
Свойство Margin
Свойство margin, в основном, используется для создания внешних вертикальных и горизонтальных отступов
между элементами.
!
Аналогично другим блочным свойствам есть свойства для каждой стороны - margin-top, margin-right, margin-bottom и margin-left.
!
Слайд 24
Свойство Margin
Примеры использования свойства margin.
!
Слайд 25
Margin auto
В отличие от padding, свойство margin может быть отрицательным (например: -10px), а
также принимать значение auto. По вертикали значения margin не складываются, выбирается максимальное значение, а по горизонтали происходит сложение.
!
Если использовать значение auto для отступов слева и справа, а также задать ширину элемента через width, то свойство margin позволяет выравнивать элемент по центру горизонтали.
margin: 0 auto;
!
Слайд 26
Обнуление margin
Для некоторых элементов, браузер добавляет margin автоматически. Вот несколько примеров:
для по
умолчанию margin задан как 8px;
для списков
,
,
margin-top и margin-bottom заданы как 1em (16px);
!
Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение.
Аналогично можно сделать и со свойством padding.
!
* {
margin: 0;
padding: 0;
}
Слайд 27
Позиционирование элементов
Позиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное,
относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom можно отображать элемент в точке с заданными координатами, фиксировать его в указанном месте, определять положение одного элемента относительно другого, управлять размерами и др.
!
!
Слайд 28
Cвойство Position
Для изменения типа позиционирования применяется свойство position. Само по себе это свойство
используется крайне редко и как правило идет в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.
Свойство position не только устанавливает тип позиционирования, но и меняет поведение элемента, благодаря чему расширяется арсенал приемов верстки.
!
!
position: absolute;
left: 10px;
top: 10px;
Особенности приоритетов!
При указании свойств left и right, приоритет будет иметь left, а right – не сработает. При указании top и bottom, приоритет будет иметь top.
!
Слайд 29
Cвойство Position
У свойства position есть пять значений:
абсолютное позиционирование. Элемент при этом не существует
в потоке документа (его место схлопывается), его положение задаётся относительно его ближайшего относительно позиционированного предка. Если такого нет, относительно body.
!
нормальное или статическое позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static - это значение по умолчанию для position. Свойства left, top, right, bottom и z-index не применяются к данному элементу.
относительное позиционирование. Изменяет положение элемента от его исходного расположения на основе значений left, top, right, bottom. Его место, которое он занимал по структуре макета страницы остается и не схлопывается. Положительное значение left сдвигает вправо от левой границы элемента, отрицательное - сдвигает влево. Положительное значение top сдвигает элемента вниз, отрицательное - сдвигает вверх. Работает свойство z-index.
relative
absolute
static
Слайд 30
Cвойство Position
фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие
от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
липкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
sticky
fixed
Слайд 31
Relative and Absolute
Обычно, относительное позиционирование само по себе применяется не часто, поскольку для
смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приемов верстки.
!
Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя, а не относительно body. Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются.
!
Слайд 32
Position: fixed
Фиксированное позиционирование элемента задается значением fixed свойства position и по своему действию
похоже на абсолютное позиционирование. Но, в отличии от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
!
Особенности!
При прокрутке веб-страницы элемент остаётся на своём исходном месте.
Положение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.
При выходе элемента за пределы видимой области справа или снизу от нее, не возникает полос прокрутки и элемент просто «обрезается».
В остальном, значение fixed похоже на absolute. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю.
!
.box {
background: yellow;
position: fixed;
left: 50%;
top: 50%;
}
Слайд 33
Float
Иногда возможностей свойства position может быть недостаточно или они будут не очень удобны
в использовании.
Например, в задаче, где нужно разместить несколько блоков горизонтально. В таком случае можно воспользоваться свойством float.
Свойство float позволяет сделать элемент обтекаемым.
Цель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.
!
!
Слайд 34
Float
Как вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:
сперва
текст сдвинулся вправо, рядом с изображением;
затем, когда появилось пространство под изображением, текст заполнил это пространство.
!
img {
float: left;
}
Имя файла: Блочная-модель.pptx
Количество просмотров: 101
Количество скачиваний: 0
Скачать
- Предыдущая
Формирование системы таможенного дела и таможенной политики в XV-XVI веках
Следующая -
Медицинадағы маркетинг
Похожие презентации
Обработка массивов
Video Game Design History. История, сотворённая на наших глазах
Локальные и глобальные сети ЭВМ. Защита информации в сетях. (Тема 6)
Способы создания таблиц в AutoCAD
САОД stl, метрика Левенштейна
Путешествие в страну информатики
Инструмент Scribble
MS SQL Server. Многопользовательские приложения
Операційна система Windows
Библиографические записи (ГОСТ Р 7.0.100-2018)
Система электронного документооборота (СЭД) в органах государственной власти
Технология XSD
Лекція №3. Потоковi манiпулятори
Оказание услуг в рамках осуществления межведомственного взаимодействия
Федеральный закон Российской Федерации от 06.04.2011 № 63-ФЗ Об электронной подписи. Виды, состав ЭП
Языки программирования, изучаемые в школе
Шрифтовый дизайн
Компьютерная графика и Web-дизайн
Начальные сведения. Определение и основные понятия. Что могут содержать Web-страницы HTML теги?
Системы счисления
Объекты и их имена. Признаки объектов.
Язык программирования Swift
Чек-лист по загрузке и продвижению видео на Instagram
Логические элементы компьютера
Rational Unified Process (RUP). Рациональный унифицированный процесс (Rational Unified Process, RUP)
Системы счисления
Структура программы, типы данных, управлющие конструкции
Завдання: Написати програму, яка переводить числа з арабської системи в римську
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:168690,name:k,category:G,count:35,jpg:"jpg\u002F168690",hits:101,download:b,h1:"Блочная модель презентация",meta:{h1:k,title:k,description:"Блочная модель презентация на тему, доклад, Информатика",keywords:"Блочная модель, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Блочная модель из раздела Информатика. Презентация на заданную тему содержит 35 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EБлочная модель\u003Cbr\u003E\u003Cp\u003EВ HTML все элементы можно представить в виде прямоугольных блоков. Для отображения блока, браузер вычисляет размеры его содержимого и применяет к блоку набор типовых свойств. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EТаким образом, блочная модель является пе",file:"Блочная-модель.pptx",texts:["\u003Cp\u003EБЛОЧНАЯ МОДЕЛЬ\u003Cbr\u003E\u003Cp\u003EПреподаватель: Пьянкова Марина Анатольевна\u003Cbr\u003E","\u003Cp\u003EБлочная модель\u003Cbr\u003E\u003Cp\u003EВ HTML все элементы можно представить в виде прямоугольных блоков. Для отображения блока, браузер вычисляет размеры его содержимого и применяет к блоку набор типовых свойств. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EТаким образом, блочная модель является первым шагом к пониманию, как отображаются элементы в браузере. Знание блочной модели помогает строить отдельные блоки и компоновать их в веб-страницы, что и является основой вёрстки.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003EТег \u003Cdiv\u003E\u003Cbr\u003E\u003Cp\u003EТег \u003Cdiv\u003E в HTML является блочным элементом верстки. Используется как контейнер для содержимого.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДля определения свойств блоков div используют каскадные таблицы стилей (CSS).\u003Cbr\u003E\u003Cp\u003EС помощью тега \u003Cdiv\u003E обычно и создается внутренняя структура страницы.\u003Cbr\u003EТег \u003Cdiv\u003E может содержать вложенные \u003Cdiv\u003E элементы в неограниченном количестве.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E\tСодержимое\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EСвойство box-sizing\u003Cbr\u003E\u003Cp\u003EСвойство box-sizing определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет. Синтаксис: box-sizing: content-box | border-box | initial | inherit;\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003EСписок основных семантических тегов:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E\u003Cheader\u003E \u003Cbr\u003E\u003Cnav\u003E\u003Cbr\u003E\u003Caside\u003E\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E\u003Cmain\u003E\u003Cbr\u003E\u003Cfooter\u003E\u003Cbr\u003E\u003Carticle\u003E \u003Cbr\u003E\u003Cfigure\u003E\u003Cbr\u003E\u003Cfigcaption\u003E\u003Cbr\u003E\u003Cdetails\u003E\u003Cbr\u003E\u003Csummary\u003E\u003Cbr\u003E\u003Cmark\u003E \u003Cbr\u003E\u003Ctime\u003E\u003Cbr\u003E\u003Cp\u003EСемантические элементы четко описывают, что они означают, как браузеру, так и веб-разработчику.\u003Cbr\u003EВ качестве примера не семантических элементов можно привести теги \u003Cdiv\u003E и \u003Cspan\u003E. Они ничего не говорят о характере их контента.\u003Cbr\u003EПримеры семантических элементов: \u003Cform\u003E, \u003Ctable\u003E и \u003Carticle\u003E. Они четко описывают, какого характера контент они содержат.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cheader\u003E предназначен для определения заголовочного блока или \"шапки\" документа или раздела.\u003Cbr\u003EЭлемент \u003Cheader\u003E следует использовать как контейнер для вводной информации.\u003Cbr\u003EВ одном документе разрешается определять несколько элементов \u003Cheader\u003E.\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cnav\u003E определяет набор ссылок навигации.\u003Cbr\u003EОбратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента \u003Cnav\u003E. Элемент \u003Cnav\u003E предназначен только для основного блока навигационных ссылок.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Caside\u003E определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, \"сайдбар\").\u003Cbr\u003EКонтент внутри элемента \u003Caside\u003E должен соотноситься с окружающим контентом.\u003Cbr\u003E\u003Cp\u003EТег \u003Csection\u003E определяет раздел документа, вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п. \u003Cbr\u003EПо умолчанию рассматривается браузером как блочный элемент. Допускается вкладывать в элемент \u003Csection\u003E другие элементы \u003Csection\u003E.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Cmain\u003E определяет основное содержимое документа.\u003Cbr\u003EСодержимое внутри элемента \u003Cmain\u003E должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, логотипов, поисковых форм и т.п.\u003Cbr\u003EВ документе может быть только один элемент \u003Cmain\u003E, и он не должен быть вложен в элементы \u003Carticle\u003E, \u003Caside\u003E, \u003Cfooter\u003E, \u003Cheader\u003E или \u003Cnav\u003E.\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cfooter\u003E предназначен для определения \"подвала\" документа или раздела и должен содержать информацию о содержащим его элементе.\u003Cbr\u003EОбычно в \"подвале\" размещают информацию об авторе, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.\u003Cbr\u003EВ одном документе разрешается определять несколько элементов \u003Cfooter\u003E.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E2 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Carticle\u003E определяет независимый, самодостаточный контент.\u003Cbr\u003EКонтент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.\u003Cbr\u003EВ качестве примеров использования элемента \u003Carticle\u003E могут выступать:\u003Cbr\u003EПубликация на форуме\u003Cbr\u003EПубликация в блоге\u003Cbr\u003EГазетная статья\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E3 группа – элементы \u003Cfigure\u003E и \u003Cfigcaption\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EНазначение элемента \u003Cfigcaption\u003E - добавление визуального пояснения к изображению.\u003Cbr\u003EВ HTML5 изображение и пояснение к нему может быть сгруппировано в элементе \u003Cfigure\u003E:\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cimg\u003E определяет изображение, а элемент \u003Cfigcaption\u003E пояснение к нему.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E4 группа – элементы \u003Cdetails\u003E и \u003Csummary\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Cdetails\u003E определяет дополнительную информацию, которую пользователь может по желанию открыть или скрыть. Внутри тега \u003Cdetails\u003E можно размещать любой контент.\u003Cbr\u003EСодержимое элемента \u003Cdetails\u003E должно быть скрыто до тех пор, пока не будет установлен атрибут open.\u003Cbr\u003EДля определения видимого заголовка дополнительной информации в теге \u003Cdetails\u003E используется элемент \u003Csummary\u003E. На заголовок можно нажимать. Это откроет\u002Fзакроет дополнительную информацию.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E5 группа – элементы \u003Cmark\u003E и \u003Ctime\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Ctime\u003E определяет читаемую человеком дату и время.\u003Cbr\u003EЭтот элемент также может использоваться для кодирования дат и времени в машинно-читаемом виде, чтобы агенты пользователей могли предлагать добавлять напоминания о днях рождения или запланированные события в календарь пользователя, а поисковые системы могут создавать более умные результаты поиска.\u003Cbr\u003E\u003Cp\u003EТег \u003Cmark\u003E определяет маркированный\u002Fвыделенный текст.\u003Cbr\u003E","\u003Cp\u003EСвойства блока\u003Cbr\u003E\u003Cp\u003EКак мы уже знаем, любой элемент на веб-странице представляет собой прямоугольный блок, который состоит из набора свойств.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсновой блока выступает его содержимое, ширина которого задается свойством width, а высота через height;\u003Cbr\u003E\u003Cp\u003EВокруг содержимого идут поля (padding – внутренние отступы), они создают пустое пространство от содержимого до внутреннего края границ, затем идут границы (border), а вокруг границ внешние отступы (margin) — невидимое пустое пространство от внешнего края границ. Порядок этих свойств в блоке чётко определён.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство Padding\u003Cbr\u003E\u003Cp\u003EСвойство padding задаёт расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсновное предназначение свойства padding - создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно ко краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EФормат записи Padding\u003Cbr\u003E\u003Cp\u003EPadding достаточно универсальное свойство и у него может быть указано от одного до четырех значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EПри указании одного значения данного свойства определяются поля для всех сторон блока.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДва значения: первое определяет поля сверху и снизу для элемента, второе значение слева и справа для элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТри значения: первое задаст поле сверху для элемента, второе одновременно слева и справа, а третье снизу.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EФормат записи Padding\u003Cbr\u003E\u003Cp\u003EЧетыре значения: первое определяет поле сверху, второе справа, третье снизу, четвёртое слева.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EКроме того, есть свойства для каждой стороны отдельно - padding-top, padding-right, padding-bottom и padding-left.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДля информации! \u003Cbr\u003EТег \u003C!-- --\u003E используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство text-align \u003Cbr\u003E\u003Cp\u003EЧасто используемые значения свойства text-align: \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство text-decoration \u003Cbr\u003E","\u003Cp\u003EСвойство text-transform \u003Cbr\u003E","\u003Cp\u003EСвойство text-indent \u003Cbr\u003E\u003Cp\u003EСвойство text-indent используется для указания отступа первой строки текста:\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство border\u003Cbr\u003E\u003Cp\u003EЧасто используемые значения свойства border и примеры: \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EВид рамки\u003Cbr\u003E\u003Cp\u003EВид рамки в зависимости от стиля и толщины границы элемента\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство Margin\u003Cbr\u003E\u003Cp\u003EСвойство margin, в основном, используется для создания внешних вертикальных и горизонтальных отступов между элементами. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EАналогично другим блочным свойствам есть свойства для каждой стороны - margin-top, margin-right, margin-bottom и margin-left.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство Margin\u003Cbr\u003E\u003Cp\u003EПримеры использования свойства margin. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EMargin auto\u003Cbr\u003E\u003Cp\u003EВ отличие от padding, свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. По вертикали значения margin не складываются, выбирается максимальное значение, а по горизонтали происходит сложение.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЕсли использовать значение auto для отступов слева и справа, а также задать ширину элемента через width, то свойство margin позволяет выравнивать элемент по центру горизонтали.\u003Cbr\u003E\u003Cp\u003Emargin: 0 auto;\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EОбнуление margin\u003Cbr\u003E\u003Cp\u003EДля некоторых элементов, браузер добавляет margin автоматически. Вот несколько примеров:\u003Cbr\u003Eдля \u003Cbody\u003E по умолчанию margin задан как 8px;\u003Cbr\u003Eдля списков \u003Cul\u003E, \u003Col\u003E, \u003Cdl\u003E margin-top и margin-bottom заданы как 1em (16px);\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. \u003Cbr\u003EАналогично можно сделать и со свойством padding.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E* {\u003Cbr\u003E margin: 0;\u003Cbr\u003E padding: 0;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПозиционирование элементов\u003Cbr\u003E\u003Cp\u003EПозиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное, относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.\u003Cbr\u003E\u003Cp\u003EБлагодаря комбинации свойств position, left, top, right и bottom можно отображать элемент в точке с заданными координатами, фиксировать его в указанном месте, определять положение одного элемента относительно другого, управлять размерами и др. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003EДля изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идет в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.\u003Cbr\u003E\u003Cp\u003EСвойство position не только устанавливает тип позиционирования, но и меняет поведение элемента, благодаря чему расширяется арсенал приемов верстки.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eposition: absolute;\u003Cbr\u003Eleft: 10px;\u003Cbr\u003Etop: 10px;\u003Cbr\u003E\u003Cp\u003EОсобенности приоритетов!\u003Cbr\u003EПри указании свойств left и right, приоритет будет иметь left, а right – не сработает. При указании top и bottom, приоритет будет иметь top.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003EУ свойства position есть пять значений:\u003Cbr\u003E\u003Cp\u003Eабсолютное позиционирование. Элемент при этом не существует в потоке документа (его место схлопывается), его положение задаётся относительно его ближайшего относительно позиционированного предка. Если такого нет, относительно body.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eнормальное или статическое позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static - это значение по умолчанию для position. Свойства left, top, right, bottom и z-index не применяются к данному элементу.\u003Cbr\u003E\u003Cp\u003Eотносительное позиционирование. Изменяет положение элемента от его исходного расположения на основе значений left, top, right, bottom. Его место, которое он занимал по структуре макета страницы остается и не схлопывается. Положительное значение left сдвигает вправо от левой границы элемента, отрицательное - сдвигает влево. Положительное значение top сдвигает элемента вниз, отрицательное - сдвигает вверх. Работает свойство z-index.\u003Cbr\u003E\u003Cp\u003Erelative\u003Cbr\u003E\u003Cp\u003Eabsolute\u003Cbr\u003E\u003Cp\u003Estatic\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003Eфиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.\u003Cbr\u003E\u003Cp\u003Eлипкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.\u003Cbr\u003E\u003Cp\u003Esticky\u003Cbr\u003E\u003Cp\u003Efixed\u003Cbr\u003E","\u003Cp\u003ERelative and Absolute\u003Cbr\u003E\u003Cp\u003EОбычно, относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приемов верстки.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЕсли для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя, а не относительно body. Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EPosition: fixed\u003Cbr\u003E\u003Cp\u003EФиксированное позиционирование элемента задается значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но, в отличии от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсобенности!\u003Cbr\u003EПри прокрутке веб-страницы элемент остаётся на своём исходном месте.\u003Cbr\u003EПоложение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.\u003Cbr\u003EПри выходе элемента за пределы видимой области справа или снизу от нее, не возникает полос прокрутки и элемент просто «обрезается».\u003Cbr\u003EВ остальном, значение fixed похоже на absolute. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E.box {\u003Cbr\u003E background: yellow; \u003Cbr\u003E position: fixed;\u003Cbr\u003E left: 50%;\u003Cbr\u003E top: 50%;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EИногда возможностей свойства position может быть недостаточно или они будут не очень удобны в использовании.\r\nНапример, в задаче, где нужно разместить несколько блоков горизонтально. В таком случае можно воспользоваться свойством float.\u003Cbr\u003E\u003Cp\u003EСвойство float позволяет сделать элемент обтекаемым. \u003Cbr\u003EЦель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EКак вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:\u003Cbr\u003Eсперва текст сдвинулся вправо, рядом с изображением;\u003Cbr\u003Eзатем, когда появилось пространство под изображением, текст заполнил это пространство.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eimg {\u003Cbr\u003E float: left;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EКласс .clearfix использует свойство clear, которое очищает последствия свойства float и возвращает элементы в нормальное значение.\u003Cbr\u003EПо необходимости, добавьте данный класс к любому элементу, после которого хотите очистить поток.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТак как float “ломает” поток элементов в документе, после его использования нужно вернуть все на свои места. \u003Cbr\u003EДля этого можно использовать шаблонное правило в CSS, например:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EСвойство float является очень мощным инструментом, однако, неправильное его использование может нарушить структуру всей страницы и привести к неожиданным последствиям.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E.clearfix::after { \u003Cbr\u003E content: '';\u003Cbr\u003E clear: both; \u003Cbr\u003E display: block;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E"],href:"\u002Finformatika\u002Fblochnaya-model-1",href_category:"\u002Finformatika",date:1628581077,related:[{id:98325,name:"Обработка массивов",href:"\u002Finformatika\u002Fobrabotka-massivov-5",jpg:"jpg\u002F98325"},{id:292851,name:"Video Game Design History. История, сотворённая на наших глазах",href:"\u002Finformatika\u002Fvideo-game-design-history-istoriya-sotvoryonnaya",jpg:"jpg\u002F292851"},{id:98878,name:"Локальные и глобальные сети ЭВМ. Защита информации в сетях. (Тема 6)",href:"\u002Finformatika\u002Flokalnye-i-globalnye-seti-evm-zashchita",jpg:"jpg\u002F98878"},{id:105626,name:"Способы создания таблиц в AutoCAD",href:"\u002Finformatika\u002Fsposoby-sozdaniya-tablits-v-autocad",jpg:"jpg\u002F105626"},{id:581722,name:"САОД stl, метрика Левенштейна",href:"\u002Finformatika\u002Fsaod-stl-metrika-levenshteyna",jpg:"jpg\u002F581722"},{id:392930,name:"Путешествие в страну информатики",href:"\u002Finformatika\u002Fputeshestvie-v-stranu-informatiki-2",jpg:"jpg\u002F392930"},{id:609252,name:"Инструмент Scribble",href:"\u002Finformatika\u002Finstrument-scribble",jpg:"jpg\u002F609252"},{id:2022,name:"MS SQL Server. Многопользовательские приложения",href:"\u002Finformatika\u002Fms-sql-server-mnogopolzovatelskie-prilozheniya",jpg:"jpg\u002F2022"},{id:3196,name:"Операційна система Windows",href:"\u002Finformatika\u002Foperatsyna-sistema-windows",jpg:"jpg\u002F3196"},{id:607294,name:"Библиографические записи (ГОСТ Р 7.0.100-2018)",href:"\u002Finformatika\u002Fbibliograficheskie-zapisi-gost-r-70100-2018",jpg:"jpg\u002F607294"},{id:331106,name:"Система электронного документооборота (СЭД) в органах государственной власти",href:"\u002Finformatika\u002Fsistema-elektronnogo-dokumentooborota-sed-v-organah",jpg:"jpg\u002F331106"},{id:284283,name:"Технология XSD",href:"\u002Finformatika\u002Ftehnologiya-xsd",jpg:"jpg\u002F284283"},{id:252027,name:"Лекція №3. Потоковi манiпулятори",href:"\u002Finformatika\u002Flektsya-n3-potokovi-manipulyatori",jpg:"jpg\u002F252027"},{id:401488,name:"Оказание услуг в рамках осуществления межведомственного взаимодействия",href:"\u002Finformatika\u002Fokazanie-uslug-v-ramkah-osushchestvleniya-mezhvedomstvennogo",jpg:"jpg\u002F401488"},{id:365060,name:"Федеральный закон Российской Федерации от 06.04.2011 № 63-ФЗ Об электронной подписи. Виды, состав ЭП",href:"\u002Finformatika\u002Ffederalnyy-zakon-rossiyskoy-federatsii-ot-06042011",jpg:"jpg\u002F365060"},{id:268628,name:"Языки программирования, изучаемые в школе",href:"\u002Finformatika\u002Fyazyki-programmirovaniya-izuchaemye-v-shkole",jpg:"jpg\u002F268628"},{id:129868,name:"Шрифтовый дизайн",href:"\u002Finformatika\u002Fshriftovyy-dizayn",jpg:"jpg\u002F129868"},{id:255966,name:"Компьютерная графика и Web-дизайн",href:"\u002Finformatika\u002Fkompyuternaya-grafika-i-web-dizayn",jpg:"jpg\u002F255966"},{id:589682,name:"Начальные сведения. Определение и основные понятия. Что могут содержать Web-страницы HTML теги?",href:"\u002Finformatika\u002Fnachalnye-svedeniya-opredelenie-i-osnovnye-ponyatiya",jpg:"jpg\u002F589682"},{id:231426,name:H,href:"\u002Finformatika\u002Fsistemy-schisleniya-33",jpg:"jpg\u002F231426"},{id:448401,name:"Объекты и их имена. Признаки объектов.",href:"\u002Finformatika\u002Fobekty-i-ih-imena-priznaki-obektov-1",jpg:"jpg\u002F448401"},{id:127785,name:"Язык программирования Swift",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-swift",jpg:"jpg\u002F127785"},{id:425701,name:"Чек-лист по загрузке и продвижению видео на Instagram",href:"\u002Finformatika\u002Fchek-list-po-zagruzke-i-prodvizheniyu",jpg:"jpg\u002F425701"},{id:232324,name:"Логические элементы компьютера",href:"\u002Finformatika\u002Flogicheskie-elementy-kompyutera",jpg:"jpg\u002F232324"},{id:382238,name:"Rational Unified Process (RUP). Рациональный унифицированный процесс (Rational Unified Process, RUP)",href:"\u002Finformatika\u002Frational-unified-process-rup-ratsionalnyy-unifitsirovannyy",jpg:"jpg\u002F382238"},{id:379540,name:H,href:"\u002Finformatika\u002Fsistemy-schisleniya-57",jpg:"jpg\u002F379540"},{id:344152,name:"Структура программы, типы данных, управлющие конструкции",href:"\u002Finformatika\u002Fstruktura-programmy-tipy-dannyh-upravlyushchie-konstruktsii",jpg:"jpg\u002F344152"},{id:96077,name:"Завдання: Написати програму, яка переводить числа з арабської системи в римську",href:"\u002Finformatika\u002Fzavdannya-napisati-programu-yaka-perevodit-chisla",jpg:"jpg\u002F96077"}],navigation:{next:"\u002Fmarketing\u002Fmeditsinaday-marketing",next_name:"Медицинадағы маркетинг",prev:"\u002Fistoriya\u002Fformirovanie-sistemy-tamozhennogo-dela-i-tamozhennoy",prev_name:"Формирование системы таможенного дела и таможенной политики в XV-XVI веках"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Блочная модель","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика","Системы счисления",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

Свойство box-sizing
Свойство box-sizing определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет. Синтаксис: box-sizing: content-box | border-box | initial | inherit;
!

HTML5 - семантические теги
Список основных семантических тегов:
!
Семантические элементы четко описывают, что они означают, как браузеру, так и веб-разработчику.
В качестве примера не семантических элементов можно привести теги
и
. Они ничего не говорят о характере их контента.
Примеры семантических элементов:
, и
. Они четко описывают, какого характера контент они содержат.
!
Слайд 6
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
предназначен для определения
заголовочного блока или "шапки" документа или раздела.
Элемент
следует использовать как контейнер для вводной информации.
В одном документе разрешается определять несколько элементов
.
Элемент
определяет набор ссылок навигации.
Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента
. Элемент
предназначен только для основного блока навигационных ссылок.
Слайд 7
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
определяет некий контент,
находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар").
Контент внутри элемента
должен соотноситься с окружающим контентом.
Тег
определяет раздел документа, вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п.
По умолчанию рассматривается браузером как блочный элемент. Допускается вкладывать в элемент
другие элементы
.
Слайд 8
HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Тег
определяет основное содержимое
документа.
Содержимое внутри элемента
должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, логотипов, поисковых форм и т.п.
В документе может быть только один элемент
, и он не должен быть вложен в элементы
,
,
,
или
.
Элемент
предназначен для определения "подвала" документа или раздела и должен содержать информацию о содержащим его элементе.
Обычно в "подвале" размещают информацию об авторе, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.
В одном документе разрешается определять несколько элементов
.
Слайд 9
HTML5 - семантические теги
2 группа – внешний шаблон страницы:
!
Элемент
определяет независимый, самодостаточный
контент.
Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
В качестве примеров использования элемента
могут выступать:
Публикация на форуме
Публикация в блоге
Газетная статья
Слайд 10
HTML5 - семантические теги
3 группа – элементы
и
:
!
Назначение элемента
-
добавление визуального пояснения к изображению.
В HTML5 изображение и пояснение к нему может быть сгруппировано в элементе
:
Элемент
определяет изображение, а элемент
пояснение к нему.
Слайд 11
HTML5 - семантические теги
4 группа – элементы
и
:
!
Тег
определяет дополнительную
информацию, которую пользователь может по желанию открыть или скрыть. Внутри тега
можно размещать любой контент.
Содержимое элемента
должно быть скрыто до тех пор, пока не будет установлен атрибут open.
Для определения видимого заголовка дополнительной информации в теге
используется элемент
. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.
Слайд 12
HTML5 - семантические теги
5 группа – элементы
и
:
!
Тег
определяет читаемую
человеком дату и время.
Этот элемент также может использоваться для кодирования дат и времени в машинно-читаемом виде, чтобы агенты пользователей могли предлагать добавлять напоминания о днях рождения или запланированные события в календарь пользователя, а поисковые системы могут создавать более умные результаты поиска.
Тег
определяет маркированный/выделенный текст.
Слайд 13
Свойства блока
Как мы уже знаем, любой элемент на веб-странице представляет собой прямоугольный блок,
который состоит из набора свойств.
!
Основой блока выступает его содержимое, ширина которого задается свойством width, а высота через height;
Вокруг содержимого идут поля (padding – внутренние отступы), они создают пустое пространство от содержимого до внутреннего края границ, затем идут границы (border), а вокруг границ внешние отступы (margin) — невидимое пустое пространство от внешнего края границ. Порядок этих свойств в блоке чётко определён.
!
!
Слайд 14
Свойство Padding
Свойство padding задаёт расстояние от внутреннего края границы или края блока до
воображаемого прямоугольника, ограничивающего содержимое блока.
!
Основное предназначение свойства padding - создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно ко краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы.
!
Слайд 15
Формат записи Padding
Padding достаточно универсальное свойство и у него может быть указано от
одного до четырех значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.
!
При указании одного значения данного свойства определяются поля для всех сторон блока.
!
Два значения: первое определяет поля сверху и снизу для элемента, второе значение слева и справа для элемента.
!
Три значения: первое задаст поле сверху для элемента, второе одновременно слева и справа, а третье снизу.
!
Слайд 16
Формат записи Padding
Четыре значения: первое определяет поле сверху, второе справа, третье снизу, четвёртое
слева.
!
Кроме того, есть свойства для каждой стороны отдельно - padding-top, padding-right, padding-bottom и padding-left.
!
Для информации!
Тег
используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования
!
Слайд 17
Свойство text-align
Часто используемые значения свойства text-align:
1
Слайд 18
Свойство text-decoration
Слайд 19
Свойство text-transform
Слайд 20
Свойство text-indent
Свойство text-indent используется для указания отступа первой строки текста:
1
Слайд 21
Свойство border
Часто используемые значения свойства border и примеры:
1
Слайд 22
Вид рамки
Вид рамки в зависимости от стиля и толщины границы элемента
1
Слайд 23
Свойство Margin
Свойство margin, в основном, используется для создания внешних вертикальных и горизонтальных отступов
между элементами.
!
Аналогично другим блочным свойствам есть свойства для каждой стороны - margin-top, margin-right, margin-bottom и margin-left.
!
Слайд 24
Свойство Margin
Примеры использования свойства margin.
!
Слайд 25
Margin auto
В отличие от padding, свойство margin может быть отрицательным (например: -10px), а
также принимать значение auto. По вертикали значения margin не складываются, выбирается максимальное значение, а по горизонтали происходит сложение.
!
Если использовать значение auto для отступов слева и справа, а также задать ширину элемента через width, то свойство margin позволяет выравнивать элемент по центру горизонтали.
margin: 0 auto;
!
Слайд 26
Обнуление margin
Для некоторых элементов, браузер добавляет margin автоматически. Вот несколько примеров:
для по
умолчанию margin задан как 8px;
для списков
,
,
margin-top и margin-bottom заданы как 1em (16px);
!
Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение.
Аналогично можно сделать и со свойством padding.
!
* {
margin: 0;
padding: 0;
}
Слайд 27
Позиционирование элементов
Позиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное,
относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom можно отображать элемент в точке с заданными координатами, фиксировать его в указанном месте, определять положение одного элемента относительно другого, управлять размерами и др.
!
!
Слайд 28
Cвойство Position
Для изменения типа позиционирования применяется свойство position. Само по себе это свойство
используется крайне редко и как правило идет в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.
Свойство position не только устанавливает тип позиционирования, но и меняет поведение элемента, благодаря чему расширяется арсенал приемов верстки.
!
!
position: absolute;
left: 10px;
top: 10px;
Особенности приоритетов!
При указании свойств left и right, приоритет будет иметь left, а right – не сработает. При указании top и bottom, приоритет будет иметь top.
!
Слайд 29
Cвойство Position
У свойства position есть пять значений:
абсолютное позиционирование. Элемент при этом не существует
в потоке документа (его место схлопывается), его положение задаётся относительно его ближайшего относительно позиционированного предка. Если такого нет, относительно body.
!
нормальное или статическое позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static - это значение по умолчанию для position. Свойства left, top, right, bottom и z-index не применяются к данному элементу.
относительное позиционирование. Изменяет положение элемента от его исходного расположения на основе значений left, top, right, bottom. Его место, которое он занимал по структуре макета страницы остается и не схлопывается. Положительное значение left сдвигает вправо от левой границы элемента, отрицательное - сдвигает влево. Положительное значение top сдвигает элемента вниз, отрицательное - сдвигает вверх. Работает свойство z-index.
relative
absolute
static
Слайд 30
Cвойство Position
фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие
от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
липкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
sticky
fixed
Слайд 31
Relative and Absolute
Обычно, относительное позиционирование само по себе применяется не часто, поскольку для
смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приемов верстки.
!
Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя, а не относительно body. Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются.
!
Слайд 32
Position: fixed
Фиксированное позиционирование элемента задается значением fixed свойства position и по своему действию
похоже на абсолютное позиционирование. Но, в отличии от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
!
Особенности!
При прокрутке веб-страницы элемент остаётся на своём исходном месте.
Положение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.
При выходе элемента за пределы видимой области справа или снизу от нее, не возникает полос прокрутки и элемент просто «обрезается».
В остальном, значение fixed похоже на absolute. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю.
!
.box {
background: yellow;
position: fixed;
left: 50%;
top: 50%;
}
Слайд 33
Float
Иногда возможностей свойства position может быть недостаточно или они будут не очень удобны
в использовании.
Например, в задаче, где нужно разместить несколько блоков горизонтально. В таком случае можно воспользоваться свойством float.
Свойство float позволяет сделать элемент обтекаемым.
Цель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.
!
!
Слайд 34
Float
Как вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:
сперва
текст сдвинулся вправо, рядом с изображением;
затем, когда появилось пространство под изображением, текст заполнил это пространство.
!
img {
float: left;
}
Имя файла: Блочная-модель.pptx
Количество просмотров: 101
Количество скачиваний: 0
Скачать
- Предыдущая
Формирование системы таможенного дела и таможенной политики в XV-XVI веках
Следующая -
Медицинадағы маркетинг
Похожие презентации
Обработка массивов
Video Game Design History. История, сотворённая на наших глазах
Локальные и глобальные сети ЭВМ. Защита информации в сетях. (Тема 6)
Способы создания таблиц в AutoCAD
САОД stl, метрика Левенштейна
Путешествие в страну информатики
Инструмент Scribble
MS SQL Server. Многопользовательские приложения
Операційна система Windows
Библиографические записи (ГОСТ Р 7.0.100-2018)
Система электронного документооборота (СЭД) в органах государственной власти
Технология XSD
Лекція №3. Потоковi манiпулятори
Оказание услуг в рамках осуществления межведомственного взаимодействия
Федеральный закон Российской Федерации от 06.04.2011 № 63-ФЗ Об электронной подписи. Виды, состав ЭП
Языки программирования, изучаемые в школе
Шрифтовый дизайн
Компьютерная графика и Web-дизайн
Начальные сведения. Определение и основные понятия. Что могут содержать Web-страницы HTML теги?
Системы счисления
Объекты и их имена. Признаки объектов.
Язык программирования Swift
Чек-лист по загрузке и продвижению видео на Instagram
Логические элементы компьютера
Rational Unified Process (RUP). Рациональный унифицированный процесс (Rational Unified Process, RUP)
Системы счисления
Структура программы, типы данных, управлющие конструкции
Завдання: Написати програму, яка переводить числа з арабської системи в римську
Обратная связь
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R){return {data:{meta:{result:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F}},item:{result:{id:168690,name:k,category:G,count:35,jpg:"jpg\u002F168690",hits:101,download:b,h1:"Блочная модель презентация",meta:{h1:k,title:k,description:"Блочная модель презентация на тему, доклад, Информатика",keywords:"Блочная модель, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Блочная модель из раздела Информатика. Презентация на заданную тему содержит 35 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EБлочная модель\u003Cbr\u003E\u003Cp\u003EВ HTML все элементы можно представить в виде прямоугольных блоков. Для отображения блока, браузер вычисляет размеры его содержимого и применяет к блоку набор типовых свойств. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EТаким образом, блочная модель является пе",file:"Блочная-модель.pptx",texts:["\u003Cp\u003EБЛОЧНАЯ МОДЕЛЬ\u003Cbr\u003E\u003Cp\u003EПреподаватель: Пьянкова Марина Анатольевна\u003Cbr\u003E","\u003Cp\u003EБлочная модель\u003Cbr\u003E\u003Cp\u003EВ HTML все элементы можно представить в виде прямоугольных блоков. Для отображения блока, браузер вычисляет размеры его содержимого и применяет к блоку набор типовых свойств. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EТаким образом, блочная модель является первым шагом к пониманию, как отображаются элементы в браузере. Знание блочной модели помогает строить отдельные блоки и компоновать их в веб-страницы, что и является основой вёрстки.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003EТег \u003Cdiv\u003E\u003Cbr\u003E\u003Cp\u003EТег \u003Cdiv\u003E в HTML является блочным элементом верстки. Используется как контейнер для содержимого.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДля определения свойств блоков div используют каскадные таблицы стилей (CSS).\u003Cbr\u003E\u003Cp\u003EС помощью тега \u003Cdiv\u003E обычно и создается внутренняя структура страницы.\u003Cbr\u003EТег \u003Cdiv\u003E может содержать вложенные \u003Cdiv\u003E элементы в неограниченном количестве.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E\tСодержимое\u003Cbr\u003E\u003C\u002Fdiv\u003E\u003Cbr\u003E","\u003Cp\u003EСвойство box-sizing\u003Cbr\u003E\u003Cp\u003EСвойство box-sizing определяет, как вычисляется ширина и высота элемента: должны ли они включать отступы и границы, или нет. Синтаксис: box-sizing: content-box | border-box | initial | inherit;\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003EСписок основных семантических тегов:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E\u003Cheader\u003E \u003Cbr\u003E\u003Cnav\u003E\u003Cbr\u003E\u003Caside\u003E\u003Cbr\u003E\u003Csection\u003E\u003Cbr\u003E\u003Cmain\u003E\u003Cbr\u003E\u003Cfooter\u003E\u003Cbr\u003E\u003Carticle\u003E \u003Cbr\u003E\u003Cfigure\u003E\u003Cbr\u003E\u003Cfigcaption\u003E\u003Cbr\u003E\u003Cdetails\u003E\u003Cbr\u003E\u003Csummary\u003E\u003Cbr\u003E\u003Cmark\u003E \u003Cbr\u003E\u003Ctime\u003E\u003Cbr\u003E\u003Cp\u003EСемантические элементы четко описывают, что они означают, как браузеру, так и веб-разработчику.\u003Cbr\u003EВ качестве примера не семантических элементов можно привести теги \u003Cdiv\u003E и \u003Cspan\u003E. Они ничего не говорят о характере их контента.\u003Cbr\u003EПримеры семантических элементов: \u003Cform\u003E, \u003Ctable\u003E и \u003Carticle\u003E. Они четко описывают, какого характера контент они содержат.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cheader\u003E предназначен для определения заголовочного блока или \"шапки\" документа или раздела.\u003Cbr\u003EЭлемент \u003Cheader\u003E следует использовать как контейнер для вводной информации.\u003Cbr\u003EВ одном документе разрешается определять несколько элементов \u003Cheader\u003E.\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cnav\u003E определяет набор ссылок навигации.\u003Cbr\u003EОбратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента \u003Cnav\u003E. Элемент \u003Cnav\u003E предназначен только для основного блока навигационных ссылок.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Caside\u003E определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, \"сайдбар\").\u003Cbr\u003EКонтент внутри элемента \u003Caside\u003E должен соотноситься с окружающим контентом.\u003Cbr\u003E\u003Cp\u003EТег \u003Csection\u003E определяет раздел документа, вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п. \u003Cbr\u003EПо умолчанию рассматривается браузером как блочный элемент. Допускается вкладывать в элемент \u003Csection\u003E другие элементы \u003Csection\u003E.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E1 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Cmain\u003E определяет основное содержимое документа.\u003Cbr\u003EСодержимое внутри элемента \u003Cmain\u003E должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, логотипов, поисковых форм и т.п.\u003Cbr\u003EВ документе может быть только один элемент \u003Cmain\u003E, и он не должен быть вложен в элементы \u003Carticle\u003E, \u003Caside\u003E, \u003Cfooter\u003E, \u003Cheader\u003E или \u003Cnav\u003E.\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cfooter\u003E предназначен для определения \"подвала\" документа или раздела и должен содержать информацию о содержащим его элементе.\u003Cbr\u003EОбычно в \"подвале\" размещают информацию об авторе, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.\u003Cbr\u003EВ одном документе разрешается определять несколько элементов \u003Cfooter\u003E.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E2 группа – внешний шаблон страницы:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Carticle\u003E определяет независимый, самодостаточный контент.\u003Cbr\u003EКонтент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.\u003Cbr\u003EВ качестве примеров использования элемента \u003Carticle\u003E могут выступать:\u003Cbr\u003EПубликация на форуме\u003Cbr\u003EПубликация в блоге\u003Cbr\u003EГазетная статья\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E3 группа – элементы \u003Cfigure\u003E и \u003Cfigcaption\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EНазначение элемента \u003Cfigcaption\u003E - добавление визуального пояснения к изображению.\u003Cbr\u003EВ HTML5 изображение и пояснение к нему может быть сгруппировано в элементе \u003Cfigure\u003E:\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cimg\u003E определяет изображение, а элемент \u003Cfigcaption\u003E пояснение к нему.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E4 группа – элементы \u003Cdetails\u003E и \u003Csummary\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Cdetails\u003E определяет дополнительную информацию, которую пользователь может по желанию открыть или скрыть. Внутри тега \u003Cdetails\u003E можно размещать любой контент.\u003Cbr\u003EСодержимое элемента \u003Cdetails\u003E должно быть скрыто до тех пор, пока не будет установлен атрибут open.\u003Cbr\u003EДля определения видимого заголовка дополнительной информации в теге \u003Cdetails\u003E используется элемент \u003Csummary\u003E. На заголовок можно нажимать. Это откроет\u002Fзакроет дополнительную информацию.\u003Cbr\u003E","\u003Cp\u003EHTML5 - семантические теги\u003Cbr\u003E\u003Cp\u003E5 группа – элементы \u003Cmark\u003E и \u003Ctime\u003E:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТег \u003Ctime\u003E определяет читаемую человеком дату и время.\u003Cbr\u003EЭтот элемент также может использоваться для кодирования дат и времени в машинно-читаемом виде, чтобы агенты пользователей могли предлагать добавлять напоминания о днях рождения или запланированные события в календарь пользователя, а поисковые системы могут создавать более умные результаты поиска.\u003Cbr\u003E\u003Cp\u003EТег \u003Cmark\u003E определяет маркированный\u002Fвыделенный текст.\u003Cbr\u003E","\u003Cp\u003EСвойства блока\u003Cbr\u003E\u003Cp\u003EКак мы уже знаем, любой элемент на веб-странице представляет собой прямоугольный блок, который состоит из набора свойств.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсновой блока выступает его содержимое, ширина которого задается свойством width, а высота через height;\u003Cbr\u003E\u003Cp\u003EВокруг содержимого идут поля (padding – внутренние отступы), они создают пустое пространство от содержимого до внутреннего края границ, затем идут границы (border), а вокруг границ внешние отступы (margin) — невидимое пустое пространство от внешнего края границ. Порядок этих свойств в блоке чётко определён.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство Padding\u003Cbr\u003E\u003Cp\u003EСвойство padding задаёт расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсновное предназначение свойства padding - создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно ко краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EФормат записи Padding\u003Cbr\u003E\u003Cp\u003EPadding достаточно универсальное свойство и у него может быть указано от одного до четырех значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EПри указании одного значения данного свойства определяются поля для всех сторон блока.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДва значения: первое определяет поля сверху и снизу для элемента, второе значение слева и справа для элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТри значения: первое задаст поле сверху для элемента, второе одновременно слева и справа, а третье снизу.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EФормат записи Padding\u003Cbr\u003E\u003Cp\u003EЧетыре значения: первое определяет поле сверху, второе справа, третье снизу, четвёртое слева.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EКроме того, есть свойства для каждой стороны отдельно - padding-top, padding-right, padding-bottom и padding-left.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EДля информации! \u003Cbr\u003EТег \u003C!-- --\u003E используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство text-align \u003Cbr\u003E\u003Cp\u003EЧасто используемые значения свойства text-align: \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство text-decoration \u003Cbr\u003E","\u003Cp\u003EСвойство text-transform \u003Cbr\u003E","\u003Cp\u003EСвойство text-indent \u003Cbr\u003E\u003Cp\u003EСвойство text-indent используется для указания отступа первой строки текста:\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство border\u003Cbr\u003E\u003Cp\u003EЧасто используемые значения свойства border и примеры: \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EВид рамки\u003Cbr\u003E\u003Cp\u003EВид рамки в зависимости от стиля и толщины границы элемента\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003EСвойство Margin\u003Cbr\u003E\u003Cp\u003EСвойство margin, в основном, используется для создания внешних вертикальных и горизонтальных отступов между элементами. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EАналогично другим блочным свойствам есть свойства для каждой стороны - margin-top, margin-right, margin-bottom и margin-left.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EСвойство Margin\u003Cbr\u003E\u003Cp\u003EПримеры использования свойства margin. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EMargin auto\u003Cbr\u003E\u003Cp\u003EВ отличие от padding, свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. По вертикали значения margin не складываются, выбирается максимальное значение, а по горизонтали происходит сложение.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЕсли использовать значение auto для отступов слева и справа, а также задать ширину элемента через width, то свойство margin позволяет выравнивать элемент по центру горизонтали.\u003Cbr\u003E\u003Cp\u003Emargin: 0 auto;\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EОбнуление margin\u003Cbr\u003E\u003Cp\u003EДля некоторых элементов, браузер добавляет margin автоматически. Вот несколько примеров:\u003Cbr\u003Eдля \u003Cbody\u003E по умолчанию margin задан как 8px;\u003Cbr\u003Eдля списков \u003Cul\u003E, \u003Col\u003E, \u003Cdl\u003E margin-top и margin-bottom заданы как 1em (16px);\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЭти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение. \u003Cbr\u003EАналогично можно сделать и со свойством padding.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E* {\u003Cbr\u003E margin: 0;\u003Cbr\u003E padding: 0;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПозиционирование элементов\u003Cbr\u003E\u003Cp\u003EПозиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное, относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.\u003Cbr\u003E\u003Cp\u003EБлагодаря комбинации свойств position, left, top, right и bottom можно отображать элемент в точке с заданными координатами, фиксировать его в указанном месте, определять положение одного элемента относительно другого, управлять размерами и др. \u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003EДля изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идет в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.\u003Cbr\u003E\u003Cp\u003EСвойство position не только устанавливает тип позиционирования, но и меняет поведение элемента, благодаря чему расширяется арсенал приемов верстки.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eposition: absolute;\u003Cbr\u003Eleft: 10px;\u003Cbr\u003Etop: 10px;\u003Cbr\u003E\u003Cp\u003EОсобенности приоритетов!\u003Cbr\u003EПри указании свойств left и right, приоритет будет иметь left, а right – не сработает. При указании top и bottom, приоритет будет иметь top.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003EУ свойства position есть пять значений:\u003Cbr\u003E\u003Cp\u003Eабсолютное позиционирование. Элемент при этом не существует в потоке документа (его место схлопывается), его положение задаётся относительно его ближайшего относительно позиционированного предка. Если такого нет, относительно body.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eнормальное или статическое позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static - это значение по умолчанию для position. Свойства left, top, right, bottom и z-index не применяются к данному элементу.\u003Cbr\u003E\u003Cp\u003Eотносительное позиционирование. Изменяет положение элемента от его исходного расположения на основе значений left, top, right, bottom. Его место, которое он занимал по структуре макета страницы остается и не схлопывается. Положительное значение left сдвигает вправо от левой границы элемента, отрицательное - сдвигает влево. Положительное значение top сдвигает элемента вниз, отрицательное - сдвигает вверх. Работает свойство z-index.\u003Cbr\u003E\u003Cp\u003Erelative\u003Cbr\u003E\u003Cp\u003Eabsolute\u003Cbr\u003E\u003Cp\u003Estatic\u003Cbr\u003E","\u003Cp\u003ECвойство Position\u003Cbr\u003E\u003Cp\u003Eфиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.\u003Cbr\u003E\u003Cp\u003Eлипкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.\u003Cbr\u003E\u003Cp\u003Esticky\u003Cbr\u003E\u003Cp\u003Efixed\u003Cbr\u003E","\u003Cp\u003ERelative and Absolute\u003Cbr\u003E\u003Cp\u003EОбычно, относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приемов верстки.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EЕсли для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя, а не относительно body. Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EPosition: fixed\u003Cbr\u003E\u003Cp\u003EФиксированное позиционирование элемента задается значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но, в отличии от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EОсобенности!\u003Cbr\u003EПри прокрутке веб-страницы элемент остаётся на своём исходном месте.\u003Cbr\u003EПоложение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.\u003Cbr\u003EПри выходе элемента за пределы видимой области справа или снизу от нее, не возникает полос прокрутки и элемент просто «обрезается».\u003Cbr\u003EВ остальном, значение fixed похоже на absolute. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E.box {\u003Cbr\u003E background: yellow; \u003Cbr\u003E position: fixed;\u003Cbr\u003E left: 50%;\u003Cbr\u003E top: 50%;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EИногда возможностей свойства position может быть недостаточно или они будут не очень удобны в использовании.\r\nНапример, в задаче, где нужно разместить несколько блоков горизонтально. В таком случае можно воспользоваться свойством float.\u003Cbr\u003E\u003Cp\u003EСвойство float позволяет сделать элемент обтекаемым. \u003Cbr\u003EЦель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EКак вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:\u003Cbr\u003Eсперва текст сдвинулся вправо, рядом с изображением;\u003Cbr\u003Eзатем, когда появилось пространство под изображением, текст заполнил это пространство.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003Eimg {\u003Cbr\u003E float: left;\u003Cbr\u003E}\u003Cbr\u003E","\u003Cp\u003EFloat\u003Cbr\u003E\u003Cp\u003EКласс .clearfix использует свойство clear, которое очищает последствия свойства float и возвращает элементы в нормальное значение.\u003Cbr\u003EПо необходимости, добавьте данный класс к любому элементу, после которого хотите очистить поток.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EТак как float “ломает” поток элементов в документе, после его использования нужно вернуть все на свои места. \u003Cbr\u003EДля этого можно использовать шаблонное правило в CSS, например:\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003EСвойство float является очень мощным инструментом, однако, неправильное его использование может нарушить структуру всей страницы и привести к неожиданным последствиям.\u003Cbr\u003E\u003Cp\u003E!\u003Cbr\u003E\u003Cp\u003E.clearfix::after { \u003Cbr\u003E content: '';\u003Cbr\u003E clear: both; \u003Cbr\u003E display: block;\u003Cbr\u003E}\u003Cbr\u003E\u003Cbr\u003E"],href:"\u002Finformatika\u002Fblochnaya-model-1",href_category:"\u002Finformatika",date:1628581077,related:[{id:98325,name:"Обработка массивов",href:"\u002Finformatika\u002Fobrabotka-massivov-5",jpg:"jpg\u002F98325"},{id:292851,name:"Video Game Design History. История, сотворённая на наших глазах",href:"\u002Finformatika\u002Fvideo-game-design-history-istoriya-sotvoryonnaya",jpg:"jpg\u002F292851"},{id:98878,name:"Локальные и глобальные сети ЭВМ. Защита информации в сетях. (Тема 6)",href:"\u002Finformatika\u002Flokalnye-i-globalnye-seti-evm-zashchita",jpg:"jpg\u002F98878"},{id:105626,name:"Способы создания таблиц в AutoCAD",href:"\u002Finformatika\u002Fsposoby-sozdaniya-tablits-v-autocad",jpg:"jpg\u002F105626"},{id:581722,name:"САОД stl, метрика Левенштейна",href:"\u002Finformatika\u002Fsaod-stl-metrika-levenshteyna",jpg:"jpg\u002F581722"},{id:392930,name:"Путешествие в страну информатики",href:"\u002Finformatika\u002Fputeshestvie-v-stranu-informatiki-2",jpg:"jpg\u002F392930"},{id:609252,name:"Инструмент Scribble",href:"\u002Finformatika\u002Finstrument-scribble",jpg:"jpg\u002F609252"},{id:2022,name:"MS SQL Server. Многопользовательские приложения",href:"\u002Finformatika\u002Fms-sql-server-mnogopolzovatelskie-prilozheniya",jpg:"jpg\u002F2022"},{id:3196,name:"Операційна система Windows",href:"\u002Finformatika\u002Foperatsyna-sistema-windows",jpg:"jpg\u002F3196"},{id:607294,name:"Библиографические записи (ГОСТ Р 7.0.100-2018)",href:"\u002Finformatika\u002Fbibliograficheskie-zapisi-gost-r-70100-2018",jpg:"jpg\u002F607294"},{id:331106,name:"Система электронного документооборота (СЭД) в органах государственной власти",href:"\u002Finformatika\u002Fsistema-elektronnogo-dokumentooborota-sed-v-organah",jpg:"jpg\u002F331106"},{id:284283,name:"Технология XSD",href:"\u002Finformatika\u002Ftehnologiya-xsd",jpg:"jpg\u002F284283"},{id:252027,name:"Лекція №3. Потоковi манiпулятори",href:"\u002Finformatika\u002Flektsya-n3-potokovi-manipulyatori",jpg:"jpg\u002F252027"},{id:401488,name:"Оказание услуг в рамках осуществления межведомственного взаимодействия",href:"\u002Finformatika\u002Fokazanie-uslug-v-ramkah-osushchestvleniya-mezhvedomstvennogo",jpg:"jpg\u002F401488"},{id:365060,name:"Федеральный закон Российской Федерации от 06.04.2011 № 63-ФЗ Об электронной подписи. Виды, состав ЭП",href:"\u002Finformatika\u002Ffederalnyy-zakon-rossiyskoy-federatsii-ot-06042011",jpg:"jpg\u002F365060"},{id:268628,name:"Языки программирования, изучаемые в школе",href:"\u002Finformatika\u002Fyazyki-programmirovaniya-izuchaemye-v-shkole",jpg:"jpg\u002F268628"},{id:129868,name:"Шрифтовый дизайн",href:"\u002Finformatika\u002Fshriftovyy-dizayn",jpg:"jpg\u002F129868"},{id:255966,name:"Компьютерная графика и Web-дизайн",href:"\u002Finformatika\u002Fkompyuternaya-grafika-i-web-dizayn",jpg:"jpg\u002F255966"},{id:589682,name:"Начальные сведения. Определение и основные понятия. Что могут содержать Web-страницы HTML теги?",href:"\u002Finformatika\u002Fnachalnye-svedeniya-opredelenie-i-osnovnye-ponyatiya",jpg:"jpg\u002F589682"},{id:231426,name:H,href:"\u002Finformatika\u002Fsistemy-schisleniya-33",jpg:"jpg\u002F231426"},{id:448401,name:"Объекты и их имена. Признаки объектов.",href:"\u002Finformatika\u002Fobekty-i-ih-imena-priznaki-obektov-1",jpg:"jpg\u002F448401"},{id:127785,name:"Язык программирования Swift",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-swift",jpg:"jpg\u002F127785"},{id:425701,name:"Чек-лист по загрузке и продвижению видео на Instagram",href:"\u002Finformatika\u002Fchek-list-po-zagruzke-i-prodvizheniyu",jpg:"jpg\u002F425701"},{id:232324,name:"Логические элементы компьютера",href:"\u002Finformatika\u002Flogicheskie-elementy-kompyutera",jpg:"jpg\u002F232324"},{id:382238,name:"Rational Unified Process (RUP). Рациональный унифицированный процесс (Rational Unified Process, RUP)",href:"\u002Finformatika\u002Frational-unified-process-rup-ratsionalnyy-unifitsirovannyy",jpg:"jpg\u002F382238"},{id:379540,name:H,href:"\u002Finformatika\u002Fsistemy-schisleniya-57",jpg:"jpg\u002F379540"},{id:344152,name:"Структура программы, типы данных, управлющие конструкции",href:"\u002Finformatika\u002Fstruktura-programmy-tipy-dannyh-upravlyushchie-konstruktsii",jpg:"jpg\u002F344152"},{id:96077,name:"Завдання: Написати програму, яка переводить числа з арабської системи в римську",href:"\u002Finformatika\u002Fzavdannya-napisati-programu-yaka-perevodit-chisla",jpg:"jpg\u002F96077"}],navigation:{next:"\u002Fmarketing\u002Fmeditsinaday-marketing",next_name:"Медицинадағы маркетинг",prev:"\u002Fistoriya\u002Fformirovanie-sistemy-tamozhennogo-dela-i-tamozhennoy",prev_name:"Формирование системы таможенного дела и таможенной политики в XV-XVI веках"}}},categories:{result:[{id:I,ordering:b,name:"Без категории",pseudoname:"uncategorized"},{id:144,ordering:b,name:"Бизнес",pseudoname:"biznes"},{id:146,ordering:b,name:"Образование",pseudoname:"obrazovanie"},{id:149,ordering:b,name:"Финансы",pseudoname:"finansy"},{id:150,ordering:b,name:"Государство",pseudoname:"gosudarstvo"},{id:152,ordering:b,name:"Спорт",pseudoname:"sport"},{id:154,ordering:b,name:"Армия",pseudoname:"armiya"},{id:156,ordering:b,name:"Культурология",pseudoname:"kulturologiya"},{id:157,ordering:b,name:"Еда и кулинария",pseudoname:"eda-i-kulinariya"},{id:158,ordering:b,name:"Лингвистика",pseudoname:"lingvistika"},{id:163,ordering:b,name:"Черчение",pseudoname:"cherchenie"},{id:164,ordering:b,name:"Физкультура",pseudoname:"fizkultura"},{id:165,ordering:b,name:"ИЗО",pseudoname:"izo"},{id:166,ordering:b,name:"Психология",pseudoname:"psihologiya"},{id:116,ordering:I,name:"Английский язык",pseudoname:"angliyskiy-yazyk"},{id:108,ordering:2,name:"Астрономия",pseudoname:"astronomiya"},{id:104,ordering:3,name:"Алгебра",pseudoname:"algebra"},{id:106,ordering:4,name:"Биология",pseudoname:"biologiya"},{id:142,ordering:5,name:"География",pseudoname:"geografiya"},{id:141,ordering:6,name:"Геометрия",pseudoname:"geometria"},{id:123,ordering:7,name:"Детские презентации",pseudoname:"detskie-prezentatsii"},{id:107,ordering:8,name:G,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:11,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:h,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Блочная модель","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика","Системы счисления",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
предназначен для определения заголовочного блока или "шапки" документа или раздела.
Элемент
следует использовать как контейнер для вводной информации.
В одном документе разрешается определять несколько элементов
.
Элемент
определяет набор ссылок навигации.
Обратите внимание, что НЕ ВСЕ ссылки в документе следует размещать внутри элемента
. Элемент
предназначен только для основного блока навигационных ссылок.

HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Элемент
определяет некий контент, находящийся в стороне от контента, внутри которого он расположен (как боковой блок страницы, "сайдбар").
Контент внутри элемента
должен соотноситься с окружающим контентом.
Тег
определяет раздел документа, вроде блока новостей, глав текста, вкладок в диалоговом окне и т.п.
По умолчанию рассматривается браузером как блочный элемент. Допускается вкладывать в элемент
другие элементы
.

HTML5 - семантические теги
1 группа – внешний шаблон страницы:
!
Тег
определяет основное содержимое документа.
Содержимое внутри элемента
должно быть уникальным для данного документа. Здесь не должно быть ничего, что повторяется где-либо, вроде сайдбаров, навигационных ссылок, логотипов, поисковых форм и т.п.
В документе может быть только один элемент
, и он не должен быть вложен в элементы
,
,
,
или
.
Элемент
предназначен для определения "подвала" документа или раздела и должен содержать информацию о содержащим его элементе.
Обычно в "подвале" размещают информацию об авторе, ссылки на условия использования текста, информация об авторских правах, контактные данные и т.п.
В одном документе разрешается определять несколько элементов
.

HTML5 - семантические теги
2 группа – внешний шаблон страницы:
!
Элемент
определяет независимый, самодостаточный контент.
Контент, помещенный в этот элемент, должен иметь смысл сам по себе, т. е. он должен быть понятен в отрыве от остальных частей веб-сайта.
В качестве примеров использования элемента
могут выступать:
Публикация на форуме
Публикация в блоге
Газетная статья

HTML5 - семантические теги
3 группа – элементы
и
:
!
Назначение элемента
- добавление визуального пояснения к изображению.
В HTML5 изображение и пояснение к нему может быть сгруппировано в элементе
:
Элемент
определяет изображение, а элемент
пояснение к нему.

HTML5 - семантические теги
4 группа – элементы
и
:
!
Тег
определяет дополнительную информацию, которую пользователь может по желанию открыть или скрыть. Внутри тега
можно размещать любой контент.
Содержимое элемента
должно быть скрыто до тех пор, пока не будет установлен атрибут open.
Для определения видимого заголовка дополнительной информации в теге
используется элемент
. На заголовок можно нажимать. Это откроет/закроет дополнительную информацию.

HTML5 - семантические теги
5 группа – элементы
и
:
!
Тег
определяет читаемую человеком дату и время.
Этот элемент также может использоваться для кодирования дат и времени в машинно-читаемом виде, чтобы агенты пользователей могли предлагать добавлять напоминания о днях рождения или запланированные события в календарь пользователя, а поисковые системы могут создавать более умные результаты поиска.
Тег
определяет маркированный/выделенный текст.

Свойства блока
Как мы уже знаем, любой элемент на веб-странице представляет собой прямоугольный блок, который состоит из набора свойств.
!
Основой блока выступает его содержимое, ширина которого задается свойством width, а высота через height;
Вокруг содержимого идут поля (padding – внутренние отступы), они создают пустое пространство от содержимого до внутреннего края границ, затем идут границы (border), а вокруг границ внешние отступы (margin) — невидимое пустое пространство от внешнего края границ. Порядок этих свойств в блоке чётко определён.
!
!

Свойство Padding
Свойство padding задаёт расстояние от внутреннего края границы или края блока до воображаемого прямоугольника, ограничивающего содержимое блока.
!
Основное предназначение свойства padding - создать пустое пространство вокруг содержимого элемента, например текста, чтобы он не прилегал плотно ко краю элемента. Использование padding повышает читабельность текста и улучшает внешний вид страницы.
!

Формат записи Padding
Padding достаточно универсальное свойство и у него может быть указано от одного до четырех значений. Это нужно, чтобы одновременно задавать поля на разных сторонах элемента.
!
При указании одного значения данного свойства определяются поля для всех сторон блока.
!
Два значения: первое определяет поля сверху и снизу для элемента, второе значение слева и справа для элемента.
!
Три значения: первое задаст поле сверху для элемента, второе одновременно слева и справа, а третье снизу.
!

Формат записи Padding
Четыре значения: первое определяет поле сверху, второе справа, третье снизу, четвёртое слева.
!
Кроме того, есть свойства для каждой стороны отдельно - padding-top, padding-right, padding-bottom и padding-left.
!
Для информации!
Тег
используется для написания комментария в коде HTML документа. HTML комментарии призваны улучшить читабельность кода. В комментариях обычно указывается объяснение участка кода, что упрощает процесс редактирования
!

Свойство text-align
Часто используемые значения свойства text-align:
1

Свойство text-decoration

Свойство text-transform

Свойство text-indent
Свойство text-indent используется для указания отступа первой строки текста:
1

Свойство border
Часто используемые значения свойства border и примеры:
1

Вид рамки
Вид рамки в зависимости от стиля и толщины границы элемента
1

Свойство Margin
Свойство margin, в основном, используется для создания внешних вертикальных и горизонтальных отступов между элементами.
!
Аналогично другим блочным свойствам есть свойства для каждой стороны - margin-top, margin-right, margin-bottom и margin-left.
!

Свойство Margin
Примеры использования свойства margin.
!

Margin auto
В отличие от padding, свойство margin может быть отрицательным (например: -10px), а также принимать значение auto. По вертикали значения margin не складываются, выбирается максимальное значение, а по горизонтали происходит сложение.
!
Если использовать значение auto для отступов слева и справа, а также задать ширину элемента через width, то свойство margin позволяет выравнивать элемент по центру горизонтали.
margin: 0 auto;
!

Обнуление margin
Для некоторых элементов, браузер добавляет margin автоматически. Вот несколько примеров:
для по умолчанию margin задан как 8px;
для списков
,
,
margin-top и margin-bottom заданы как 1em (16px);
!
Эти margin, согласно макету, не всегда нужны, поэтому их можно обнулить, иными словами, задать для margin нулевое значение.
Аналогично можно сделать и со свойством padding.
!
* {
margin: 0;
padding: 0;
}

Позиционирование элементов
Позиционированием называется положение элемента в системе координат. Различают несколько типов позиционирования: нормальное, относительное, абсолютное, фиксированное и приклеенное. В зависимости от типа, который устанавливается через свойство position, меняется и система координат.
Благодаря комбинации свойств position, left, top, right и bottom можно отображать элемент в точке с заданными координатами, фиксировать его в указанном месте, определять положение одного элемента относительно другого, управлять размерами и др.
!
!

Cвойство Position
Для изменения типа позиционирования применяется свойство position. Само по себе это свойство используется крайне редко и как правило идет в комбинации со свойствами left, right, top, bottom, которые определяют, соответственно, положение элемента слева, справа, сверху и снизу.
Свойство position не только устанавливает тип позиционирования, но и меняет поведение элемента, благодаря чему расширяется арсенал приемов верстки.
!
!
position: absolute;
left: 10px;
top: 10px;
Особенности приоритетов!
При указании свойств left и right, приоритет будет иметь left, а right – не сработает. При указании top и bottom, приоритет будет иметь top.
!

Cвойство Position
У свойства position есть пять значений:
абсолютное позиционирование. Элемент при этом не существует в потоке документа (его место схлопывается), его положение задаётся относительно его ближайшего относительно позиционированного предка. Если такого нет, относительно body.
!
нормальное или статическое позиционирование, при этом элементы отображаются на веб-странице в том порядке, в каком они идут в исходном коде HTML сверху вниз. static - это значение по умолчанию для position. Свойства left, top, right, bottom и z-index не применяются к данному элементу.
относительное позиционирование. Изменяет положение элемента от его исходного расположения на основе значений left, top, right, bottom. Его место, которое он занимал по структуре макета страницы остается и не схлопывается. Положительное значение left сдвигает вправо от левой границы элемента, отрицательное - сдвигает влево. Положительное значение top сдвигает элемента вниз, отрицательное - сдвигает вверх. Работает свойство z-index.
relative
absolute
static

Cвойство Position
фиксированное позиционирование. По своему действию похоже на абсолютное позиционирование, но в отличие от него привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
липкое позиционирование. Обычно применяется для фиксации заголовка на одном месте, пока содержимое, к которому относится заголовок, прокручивается на странице.
sticky
fixed

Relative and Absolute
Обычно, относительное позиционирование само по себе применяется не часто, поскольку для смещения элемента от его исходного положения есть ряд других свойств, к примеру, margin или transform. Но комбинация разных типов позиционирования для вложенных элементов является одним из удобных и практичных приемов верстки.
!
Если для родительского элемента задать position: relative, а для дочернего position: absolute, то произойдёт смена системы координат и положение дочернего элемента при этом указывается относительно его родителя, а не относительно body. Отсчёт координат ведётся от внутреннего края границы, значения padding не учитываются.
!

Position: fixed
Фиксированное позиционирование элемента задается значением fixed свойства position и по своему действию похоже на абсолютное позиционирование. Но, в отличии от него, привязывается к указанной свойствами left, top, right и bottom точке на экране и не меняет своего положения при прокрутке веб-страницы.
!
Особенности!
При прокрутке веб-страницы элемент остаётся на своём исходном месте.
Положение элемента всегда отсчитывается от области просмотра браузера, независимо от позиционирования родителя.
При выходе элемента за пределы видимой области справа или снизу от нее, не возникает полос прокрутки и элемент просто «обрезается».
В остальном, значение fixed похоже на absolute. Применяется такой тип позиционирования для создания меню, вкладок, заголовков, в общем, любых элементов, которые должны быть закреплены на веб-странице и всегда видны посетителю.
!
.box {
background: yellow;
position: fixed;
left: 50%;
top: 50%;
}

Float
Иногда возможностей свойства position может быть недостаточно или они будут не очень удобны в использовании.
Например, в задаче, где нужно разместить несколько блоков горизонтально. В таком случае можно воспользоваться свойством float.
Свойство float позволяет сделать элемент обтекаемым.
Цель обтекания элемента состоит в том, чтобы сдвинуть его к одной стороне и сделать так, чтобы текст обтекал вокруг элемента.
!
!

Float
Как вы можете видеть, изображение сдвинулось влево, а текст просто обтекает вокруг изображения:
сперва текст сдвинулся вправо, рядом с изображением;
затем, когда появилось пространство под изображением, текст заполнил это пространство.
!
img {
float: left;
}