- Главная
- Информатика
- HTML+CSS, верстка
Содержание
- 2. Короткое введение Последний стандарт HTML – версия 5 XHML – переработанный HTML в соответствии со стандартом
- 3. Заготовка
- 4. Привет, Мир!
- 5. Элементы и теги содержание тега Текст абзаца HTML – это прежде всего содержание, данные. HTML, как
- 6. Редакторы WYSIWYG или текстовые процессоры WebStorm Sublime Atom Notepad++ Microsoft Word!?
- 7. Браузеры Internet Explorer Edge Firefox Opera Safari Chrome Yandex Vivaldi
- 8. Другие инструменты Firebug – не заменим для разработки и отладки HTML, CSS, Javascript Pixel Perfect –
- 9. Теги, атрибуты. Блочные и строковые элементы , , Семантика, логичность кода ( , , , ,
- 10. Обработка ошибок, DTD Отсутствующие теги – плохая практика Первый абзац Второй абзац Заголовок Игнорирование лишних тегов
- 11. Текст Текст, абзацы, перевод строки Лишние пробельные символы не учитываются Скачано 10Кб Заголовки, значение заголовков и
- 12. Шрифт Немного терминов Название шрифта, семейство (serif, sans-serif, monospace…) Размер Цвет Межсимвольное расстояние Курсив, жирность Б
- 13. Теги логической разметки текста Не гарантируется именно такое отображение
- 14. Основные теги физической разметки Не гарантируется именно такое отображение Содержимое вышеупомянутых тегов – любые элементы допустимые
- 15. Цитаты, адреса и — цитаты (длинная и короткая) Длииинная цитата Адрес - адрес
- 16. Линейки Использование атрибутов не рекомендуется Часто используется для логического отделения информационных блоков line.html
- 17. Изображения в документе HTML Формат? Все зависит от браузеров, в HTML нет спецификаций Формат GIF сжатие
- 18. Формат JPEG 24 битная палитра (16 млн цветов) потеря качества рисунка Формат PNG цветовые схемы: truecolor
- 23. Итог JPEG – для фотографий, изображений с большим количеством градиентов и цветов GIF – для маленьких
- 24. Применение изображений в HTML align="bottom | left | middle | right | top" Заливка с помощью
- 25. Гиперссылки Основа гипертекста URL scheme:scheme_specific_part :// : @ : / http://ru.wikipedia.org:80/wiki/HTTP?get#GET Только US-ACSII – символы http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F
- 26. Отношения. Мета-теги. Мы имеем дело не с документом, а с проектом, набором документов relations.html
- 27. Списки Страны Англия Швейцария Города Крокодил Гена Чебурашка relations.html
- 28. Списки определений Термин 1 Определение первого термина Термин 2 Определение второго термина lists.html
- 29. Формы Процесс заполнения, отправки События (controls) type=text, password, file size="30" maxlength="20" value="my name" accept="image/*" forms.html
- 30. Поля форм forms.html
- 31. Поля форм 2 текст texxxt accesskey, disabled, readonly Введите имя: forms.html http://trevordavis.net/play/input-vs-button/
- 32. Таблицы Название таблицы 111 background, bgcolor, bordercolor, cols, height, title, nowrap colspan, rowspan , , tables.html
- 33. Фреймы Фреймы Рамки для frameset noresize, scrolling, frameborder для frame Не работают фреймы? target у ссылки,
- 34. Объекты и апплеты Вложенные object object.html, object.html http://www.i2r.ru/static/245/out_21542.shtml - Параметры object
- 35. div и span Div – блочный Span – строчный title, dir, lang, style, class
- 36. CSS 2 Стиль – это правило отображения тега Встроенные стили, стили документа, внешние таблицы или @import
- 37. Синтаксис seceltor {property:value; property1:value1;} p {color: red; text-decoration: underline;} p {font-family: Georgia, 'Times New Roman', Times,
- 38. Селекторы p {} /* типовой, по тегу */ #id1 {} /* идентификатор */ .class1 {} /*
- 39. Приоритеты стилей Стили !important Порядок каскадирования: По источнику ("ближе" к тегу) Специфичность, более узкое, точное определение
- 40. Специфичность a – id; b – класс, псевдокласс, аттрибут; c – имя тега. * {} /*
- 41. Размеры, цвета, URL в CSS Ключевые слова, inherit url(http://localhost/1.jpg) red, #7788AA, rgb(12,11,34) Размеры: em — ширина
- 42. Шрифты font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..) font-size: larger; font-style: italic;
- 43. Свойства текста letter-spacing: 2px; line-height: 120%; (наслед. вычисл. от родителя) text-align: right; text-decoration: blink | line-through
- 44. Контейнер строки
- 45. Свойства контейнеров Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств) top, right, bottom, left
- 46. Горизонтальное форматирование Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width) Отрицательные поля Сумма 7
- 47. контейнер контейнер height=auto horis1.html
- 48. Вертикальное форматирование Высота по содержимому (auto) Или через height. Если содержимого больше чем height – прокрутка
- 49. Сворачивание вертикальных полей margins.html
- 50. Форматирование строчных элементов Многострочный строковый элемент, рамки, фон Строковый блок и контейнер строки Отступы, рамки и
- 51. Изменение представления элемента display: block | inline | inline-table | list-item | none | run-in |
- 52. Поля По умолчанию margin=0 У некоторых элементов есть поля по умолч. img {margin: 1em;} img {margin:
- 53. Рамки Рамки внутри полей, они ограничивают фон Ширина, стиль, цвет Ширина по умолч.=medium или none Цвет
- 54. Рамки, стили рамок border-top, border-right, border-bottom, border-left: border-width || border-style || color border: border-width || border-style
- 55. Отступы padding: значение (любые меры, проценты) (TRBL) Залиты фоном Отступы не сворачиваются % относительно ширины родителя
- 56. Цвета, фон color: | inherit Свойство color для элементов форм background-color: цвет | transparent (умолч.) background-image:
- 57. Фон background-position: [проценты | значение] | [left | center | right] || [top | center |
- 58. Перемещение, плавающая модель Рисунки, параграф с float Задание ширины обязательно Поля не сворачиваются Перемещаемый элемент генерирует
- 59. Позиционирование position: absolute | fixed | relative | static static – нормальный поток relative – смещение
- 60. Позиционирование 2 Блок-контейнер для элементов с position = relative | static – родитель Блок-контейнер для элементов
- 61. Свойства смещения top, right, bottom, left: | | auto | inherit Ширина и высота min-width, min-height:
- 62. Переполнение и отсечение содержимого overflow: visible | hidden | scroll | auto | inherit overflow-x и
- 63. Видимость элементов visibility: visible | hidden | collapse | inherit visibility.html
- 64. Абсолютное позиционирование Абсолютное позиционирование относительно… Перекрытие элементов Размеры и размещение left + margin-left + border-left-width +
- 65. Размещение по оси z z-index: число | auto Может быть отрицательным Локальный контекст занесения в стек
- 66. Фиксированное позиционирование Относительно окна браузера Удобно, например, для баннеров или для меню position_fixed.html
- 67. Относительное позиционирование Смещение относительно текущего положения position_relative.html
- 68. Верстка таблиц Объединять ячейки через CSS нельзя У ячеек нет полей Свойство display tables2.html
- 69. Таблицы. Продолжение display: inline-table – таблица строкового уровня (типа inline-block) Значения можно присвоить любым элементам и
- 70. Таблицы. Продолжение Слои таблицы caption-side: top | bottom border-collapse: collapse | separate | inherit border-spacing: ?
- 71. Сливающиеся рамки ячеек Если display: table | inline-table у элемента не может быть отступов, только поля
- 72. Размеры таблиц Ширина table-layout: auto | fixed | inherit Скорость рендера с фиксированной шириной больше Если
- 73. Элементы списка Управлять размещением сложно list-style-position: inside | outside – вне содержимого или как строковый маркер
- 74. Генерируемое содержимое Например маркеры списка… a[href]:before {content: "(link)";} Ограничения на display content: строка | attr(атрибут) |
- 75. Курсоры cursor: [[ ,]* [auto | default | pointer | crosshair | move | e-resize |
- 76. Курсоры
- 77. Контуры Ну участвуют в потоке документа Могут употребляться вместе с рамками outline-style: none | dotted |
- 79. Скачать презентацию
Слайд 2Короткое введение
Последний стандарт HTML – версия 5
XHML – переработанный HTML в соответствии со
Короткое введение
Последний стандарт HTML – версия 5
XHML – переработанный HTML в соответствии со
стандартом XML
Стандарты неоднозначны, не все моменты регламентированы
Придерживайтесь стандартов, осторожнее с нестандартными решениями
Стандарты неоднозначны, не все моменты регламентированы
Придерживайтесь стандартов, осторожнее с нестандартными решениями
Слайд 3
Заготовка
Слайд 4
Привет, Мир!
Привет, Мир!
Слайд 5Элементы и теги
<название_тега>
<название_тега>содержание тега
Текст абзаца
HTML – это прежде всего содержание, данные.
HTML, как
Элементы и теги
<название_тега>
<название_тега>содержание тега
Текст абзаца
HTML – это прежде всего содержание, данные. HTML, как
правило, только лишь советует как отображать документы.
Слайд 6Редакторы
WYSIWYG или текстовые процессоры
WebStorm
Sublime
Atom
Notepad++
Microsoft Word!?
Редакторы
WYSIWYG или текстовые процессоры
WebStorm
Sublime
Atom
Notepad++
Microsoft Word!?
Слайд 7Браузеры
Internet Explorer
Edge
Firefox
Opera
Safari
Chrome
Yandex
Vivaldi
Браузеры
Internet Explorer
Edge
Firefox
Opera
Safari
Chrome
Yandex
Vivaldi
Слайд 8Другие инструменты
Firebug – не заменим для разработки и отладки HTML, CSS, Javascript
Pixel Perfect
Другие инструменты
Firebug – не заменим для разработки и отладки HTML, CSS, Javascript
Pixel Perfect
– плагин
для подложки рисунка
дизайна при верстке
IE Developer Toolbar,
IETester,
DebugBar for IETester
IE Developer Toolbar,
IETester,
DebugBar for IETester
Слайд 9Теги, атрибуты. Блочные и строковые элементы
,
, <br><body bgcolor="#A0BEC4" onload="alert('Loaded');"></body><br><!-- комментарий --><br>Семантика, логичность</div></h3></h3><!----><!----><div class="slides-content">кода
(<strong>, <em>, <blockquote>, <code>, …)<br>Спецсимволы: < > …<br><p>, <h1>, <h2>, <h3>, …, <br>, <hr><br><a href="url">текст</a><br><img src="url" title="текст"><br>Вложенность тегов<br><p>test.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide10" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-9.jpg" target="_blank" rel="noopener">Слайд 10</a><h3 class="slides-content text-center font-bold"><div><p>Обработка ошибок, DTD<br><p>Отсутствующие теги – плохая практика
<p>Первый абзац <p>Второй абзац <h2>Заголовок<br>Игнорирование лишних тегов</div></h3></h3><!----><!----><div class="slides-content"><p>Первый абзац <p><p>Второй абзац <uktag><br>XHTML – намного строже<br> - не правильно, <br /> - правильно<br>Регистр символов в названии тегов<br><b>текст <i>текст </b>текст</i> - не правильно<br>Обязательные теги, например <html><br>Инструменты проверки кода на ошибки: HTML – валидатор<br><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br><p>error.html, error2.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide11" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-10.jpg" target="_blank" rel="noopener">Слайд 11</a><h3 class="slides-content text-center font-bold"><div><p>Текст<br><p>Текст, абзацы, перевод строки<br>Лишние пробельные символы не учитываются<br><p align="left" class="log" lang="ru" id="loginfo" style="color:blue"</div></h3></h3><!----><!----><div class="slides-content">title="Некоторая статистическая информация">Скачано 10Кб</p><br>Заголовки, значение заголовков<br> и <nobr> — все браузеры поддерживают, но…<br><pre> — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)<br>Физическая и логическая разметка<br><p>text.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Шрифт<br><p>Немного терминов<br>Название шрифта, семейство (serif,
sans-serif, monospace…)<br>Размер<br>Цвет<br>Межсимвольное
расстояние<br>Курсив, жирность<br><font size=5 color="#FFFFFF" face="Courier, Arial">
Б</font>уква<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-12.jpg" target="_blank" rel="noopener">Слайд 13</a><h3 class="slides-content text-center font-bold"><div><p>Теги логической разметки текста<br><p>Не гарантируется именно такое отображение<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p>Основные теги физической разметки<br><p>Не гарантируется именно такое отображение<br>Содержимое вышеупомянутых тегов – любые элементы</div></h3></h3><!----><!----><div class="slides-content">допустимые в тексте.<br>Употребляться могут везде, где применяются элементы, относящиеся к тексту.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Цитаты, адреса<br><p><blockquote> и <q> — цитаты (длинная и короткая)
<blockquote cite="http://lib.ru/" lang="en" style="color:green;">Длииинная цитата</blockquote><br><address>Адрес</address></div></h3></h3><!----><!----><div class="slides-content">- адрес<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>Линейки <br><p><hr align="center" color="#000000" size="3" width="50%"><br>Использование атрибутов не рекомендуется<br>Часто используется для логического отделения</div></h3></h3><!----><!----><div class="slides-content">информационных блоков<br><p>line.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p>Изображения в документе HTML<br><p>Формат? Все зависит от браузеров, в HTML нет спецификаций<br>Формат GIF<br>сжатие</div></h3></h3><!----><!----><div class="slides-content">"без потерь"<br>256 цветов максимум<br>чересстрочный (всплывающий) и нормальный формат<br>прозрачность<br>анимация<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-17.jpg" target="_blank" rel="noopener">Слайд 18</a><h3 class="slides-content text-center font-bold"><div><p>Формат JPEG<br>24 битная палитра (16 млн цветов)<br>потеря качества рисунка<br>Формат PNG<br>цветовые схемы:<br>truecolor<br>grayscale<br>индексированная палитра (GIF-подобная)</div></h3></h3><!----><!----><div class="slides-content">– PNG-8<br>альфа канал на 254 уровня<br>улучшенное сжатие без потерь<br>двухмерное чередование<br>гамма-коррекция<br>Формат MNG<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-18.jpg" target="_blank" rel="noopener">Слайд 19</a><!----></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-19.jpg" target="_blank" rel="noopener">Слайд 20</a><!----></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-20.jpg" target="_blank" rel="noopener">Слайд 21</a><!----></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-21.jpg" target="_blank" rel="noopener">Слайд 22</a><!----></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>Итог<br><p>JPEG – для фотографий, изображений с большим количеством градиентов и цветов<br>GIF – для</div></h3></h3><!----><!----><div class="slides-content">маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие<br>PNG8 – когда не много цветов, четкие края, например скриншоты windows - окон<br>PNG24 – полупрозрачности, изображение без потери качества, большое количество цветов<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>Применение изображений в HTML<br><p><img src="/images/screenshot.png" alt="Скриншот" title="Скриншот" border="1" align="middle" width="50" height="70"><br>align="bottom | left</div></h3></h3><!----><!----><div class="slides-content">| middle | right | top"<br>Заливка с помощью width или height<br>Бывает, что изображения отключены…<br>ismap, usemap<br>onAbort – только ie, onError, onLoad<br>Фоновые изображения<br><p>images.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-24.jpg" target="_blank" rel="noopener">Слайд 25</a><h3 class="slides-content text-center font-bold"><div><p>Гиперссылки<br><p>Основа гипертекста<br>URL
scheme:scheme_specific_part
<схема>://<логин>:<пароль>@<хост>:<порт>/<URL‐путь>
http://ru.wikipedia.org:80/wiki/HTTP?get#GET
<a id="GET" name="GET"></a><br>Только US-ACSII – символы<br>http://yandex.ru/yandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (/ код /)<br><a href="foto.jpg" target="_blank">foto</a></div></h3></h3><!----><!----><div class="slides-content">- ссылка с относительным адресом<br>mailto:mail@mail.ru?subject=Subject<br><p>links.html, folder1/links.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-25.jpg" target="_blank" rel="noopener">Слайд 26</a><h3 class="slides-content text-center font-bold"><div><p>Отношения. Мета-теги.<br><p>Мы имеем дело не с документом, а с проектом, набором документов<br><head>
<base href="http://rezonans.ru/"</div></h3></h3><!----><!----><div class="slides-content">/>
<link rel="stylesheet" type="text/css" href="style.css" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="generator" content="MediaWiki 1.16alpha-wmf" />
<meta name="keywords" content="ASCII,Ref-en,Английский язык,Соединённые Штаты Америки,Стандарт,Код,Информация,Диакритический знак,Акут,Man (Unix),Язык" />
</head><br><p>relations.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide27" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-26.jpg" target="_blank" rel="noopener">Слайд 27</a><h3 class="slides-content text-center font-bold"><div><p>Списки<br><p><ul type="square"><br> <li>Страны<br> <ul type="circle"><br> <li>Англия</li><br> <li>Швейцария</li><br> </ul><br> </li><br> <li>Города</li><br></ul><br><ol type="A" start="3"><br><!-- A, a, I, i, 1 --><br> <li>Крокодил Гена</li><br> <li value="6">Чебурашка</li><br></ol><br><p>relations.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide28" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-27.jpg" target="_blank" rel="noopener">Слайд 28</a><h3 class="slides-content text-center font-bold"><div><p>Списки определений<br><p><dl><br> <dt>Термин 1</dt><br> <dd>Определение первого термина</dd><br> <dt>Термин 2</dt><br> <dd>Определение второго термина</dd><br></dl>
<br><p>lists.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide29" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p>Формы<br><p>Процесс заполнения, отправки<br><form action="form.php" enctype="multipart/form-data" method="POST"></form><br>События<br><input name="my_name"> (controls)<br>type=text, password, file<br>size="30" maxlength="20" value="my name"<br>accept="image/*"<br><p>forms.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide30" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-29.jpg" target="_blank" rel="noopener">Слайд 30</a><h3 class="slides-content text-center font-bold"><div><p>Поля форм<br><p><input type="checkbox" name="border" value="top" checked="checked" /> <br><input type="radio" name="border" value="top" checked><br><input type="submit"</div></h3></h3><!----><!----><div class="slides-content">value="отправить" name="submit"><br><input type="reset" value="Сбросить форму"><br><input type="image" src="knopka.jpg" name="btn" /><br><input type="button" value="надпись"><br><input type="hidden" name="user" value="34tr3sdf" /><br><p>forms.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide31" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-30.jpg" target="_blank" rel="noopener">Слайд 31</a><h3 class="slides-content text-center font-bold"><div><p>Поля форм 2<br><p><button type="submit" ><img src="btn.gif" alt="btn" /> текст</button><br><textarea name="longtext" rows="10" cols="40"></textarea><br><select name="xxx"</div></h3></h3><!----><!----><div class="slides-content">multiple="multiple" size="5"><option selected="selected">texxxt</option></select><br>accesskey, disabled, readonly<br><label for="name-field">Введите имя:</label>
<input name="name" id="name-field" /><br><fieldset><legend align="top"></legend></fieldset><br><p>forms.html<br><p>http://trevordavis.net/play/input-vs-button/<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide32" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-31.jpg" target="_blank" rel="noopener">Слайд 32</a><h3 class="slides-content text-center font-bold"><div><p>Таблицы<br><p><table cellspacing="0" cellpadding="0" border="0" frame="below" rules="cols" width="100%">
<caption>Название таблицы</caption>
<thead>
<tr align="left" valign="middle">
<th>111</th>
<td></td>
</tr>
</thead>
</table><br>background, bgcolor, bordercolor, cols,</div></h3></h3><!----><!----><div class="slides-content">height, title, nowrap<br>colspan, rowspan<br><tfoot>, <tbody><br><colgroup>, <col><br><p>tables.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide33" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-32.jpg" target="_blank" rel="noopener">Слайд 33</a><h3 class="slides-content text-center font-bold"><div><p>Фреймы<br><p><html><head><title>Фреймы
Рамки для frameset
noresize, scrolling, frameborder для frame
<br><iframe height="100"</div></h3></h3><!----><!----><div class="slides-content">width="400" src="fr1.htm">Не работают фреймы?</iframe><br>target у ссылки, <base><br><p>frames.html, iframe.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide34" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-33.jpg" target="_blank" rel="noopener">Слайд 34</a><h3 class="slides-content text-center font-bold"><div><p>Объекты и апплеты<br><p><object>
<param name="name" value="1" />
</object><br>Вложенные object<br><embed src="x.swf" type="application/x-shockwave-flash" /><br><p>object.html, object.html<br><p>http://www.i2r.ru/static/245/out_21542.shtml - Параметры</div></h3></h3><!----><!----><div class="slides-content">object<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide35" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-34.jpg" target="_blank" rel="noopener">Слайд 35</a><h3 class="slides-content text-center font-bold"><div><p>div и span<br><p>Div – блочный<br>Span – строчный <br>title, dir, lang, style, class<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide36" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-35.jpg" target="_blank" rel="noopener">Слайд 36</a><h3 class="slides-content text-center font-bold"><div><p>CSS 2<br><p>Стиль – это правило отображения тега<br>Встроенные стили, стили документа, внешние таблицы<br><link> или</div></h3></h3><!----><!----><div class="slides-content">@import<br>@media – правило <br>/* комментарий к стилям */<br><p>css.html, css.css, css1.css<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide37" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-36.jpg" target="_blank" rel="noopener">Слайд 37</a><h3 class="slides-content text-center font-bold"><div><p>Синтаксис<br><p>seceltor {property:value; property1:value1;}<br>p {color: red; text-decoration: underline;}<br>p {font-family: Georgia, 'Times New Roman', Times,</div></h3></h3><!----><!----><div class="slides-content">serif;}<br>p {border: 1px solid red;}<br>Стиль элемента явно указан, либо унаследован, либо взят по умолчанию<br><p>css0.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide38" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-37.jpg" target="_blank" rel="noopener">Слайд 38</a><h3 class="slides-content text-center font-bold"><div><p>Селекторы<br><p>p {} /* типовой, по тегу */<br>#id1 {} /* идентификатор */<br>.class1 {} /*</div></h3></h3><!----><!----><div class="slides-content">по имени класса */<br>* {} /* универсальный */<br>*[align="right"] {} /* по атрибутам */<br>p#id1.class1.class2 {}<br>p:first-line {} /* псевдоэлементы */<br>div, table, .class1 {} /*групповой*/<br>ul ul{} /*контекст, наследующие*/<br>ol > li {} /*дочерний*/<br>li + li {} /*соседние*/<br><p>http://xhtml.ru/2008/01/08/css-selectors - поддерживаемые в браузерах селекторы<br><p>css2.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide39" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-38.jpg" target="_blank" rel="noopener">Слайд 39</a><h3 class="slides-content text-center font-bold"><div><p>Приоритеты стилей<br><p>Стили
<br>!important
<br>Порядок каскадирования:<br>По источнику ("ближе" к тегу)<br>Специфичность, более узкое, точное определение<br>Порядок следования<br>Как</div></h3></h3><!----><!----><div class="slides-content">правило стили приоритетнее атрибутов<br><p>агент, браузер<br><p>пользователь<br><p>разработчик<br><p>агент, браузер<br><p>разработчик<br><p>пользователь<br><p>css.html, css.css, css1.css<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide40" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-39.jpg" target="_blank" rel="noopener">Слайд 40</a><h3 class="slides-content text-center font-bold"><div><p>Специфичность<br><p>a – id; b – класс, псевдокласс, аттрибут; c – имя тега.<br>* {}</div></h3></h3><!----><!----><div class="slides-content">/* a=0 b=0 c=0 -> специфичность = 0 */ <br>li {} /* a=0 b=0 c=1 -> специфичность = 1 */<br>ul li {} /* a=0 b=0 c=2 -> специфичность = 2 */ <br>ul ol+li {} /* a=0 b=0 c=3 -> специфичность = 3 */<br>ul ol li.red {} /* a=0 b=1 c=3 -> специфичность = 13 */<br>li.red.level {} /* a=0 b=2 c=1 -> специфичность = 21 */<br>#x34y {} /* a=1 b=0 c=0 -> специфичность = 100 */<br>/* style="" -> специфичность = 1000 */<br><p>css1.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide41" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-40.jpg" target="_blank" rel="noopener">Слайд 41</a><h3 class="slides-content text-center font-bold"><div><p>Размеры, цвета, URL в CSS<br><p>Ключевые слова, inherit<br>url(http://localhost/1.jpg)<br>red, #7788AA, rgb(12,11,34)<br>Размеры:<br>em — ширина буквы m</div></h3></h3><!----><!----><div class="slides-content">в настоящем шрифте. Например,
p {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.<br>px — пикселы<br>pt — пункты. Один пункт = 1/72 дюйма.<br>% — проценты<br>ex — ширина буквы x<br>in — дюймы<br>cm — сантиметры<br>mm — миллиметры<br>pc —размер в пиках. (12 пунктов).<br><p>keywords.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide42" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-41.jpg" target="_blank" rel="noopener">Слайд 42</a><h3 class="slides-content text-center font-bold"><div><p>Шрифты<br><p>font-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)<br>font-size: larger;<br>font-style: italic;<br>font-variant:</div></h3></h3><!----><!----><div class="slides-content">small-caps;<br>font-weight: bold; (400)<br>font: [font-style || font-variant || font-weight] font-size [/line-height] font-family<br>Загрузка шрифтов, @font-face<br><p>font_css.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide43" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-42.jpg" target="_blank" rel="noopener">Слайд 43</a><h3 class="slides-content text-center font-bold"><div><p>Свойства текста<br><p>letter-spacing: 2px;<br>line-height: 120%; (наслед. вычисл. от родителя)<br>text-align: right; <br>text-decoration: blink | line-through</div></h3></h3><!----><!----><div class="slides-content">| overline | underline | none<br>text-ident: -5em;<br>text-transform: capitalize | lowercase | uppercase | none<br>vertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты
(только строк. и замещ. элементы)<br>word-spacing: 10em;<br>white-space: normal | nowrap | pre (pre в ie6 работает ☹)<br>Другие языки…<br><p>text_css.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide44" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-43.jpg" target="_blank" rel="noopener">Слайд 44</a><h3 class="slides-content text-center font-bold"><div><p>Контейнер строки<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide45" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-44.jpg" target="_blank" rel="noopener">Слайд 45</a><h3 class="slides-content text-center font-bold"><div><p>Свойства контейнеров<br><p>Блочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)<br>top, right, bottom,</div></h3></h3><!----><!----><div class="slides-content">left<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-45.jpg" target="_blank" rel="noopener">Слайд 46</a><h3 class="slides-content text-center font-bold"><div><p>Горизонтальное форматирование<br><p>Значение auto – заполняет всю оставшуюся ширину контейнера (margin, width)<br>Отрицательные поля<br>Сумма 7</div></h3></h3><!----><!----><div class="slides-content">размеров дочернего элемента = width родительского<br>Для замещающих элементов размеры auto равны реальным размерам<br>Размеры замещающих элементов изменяются пропорционально, если задавать одно из них<br><p>autowidth.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide47" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-46.jpg" target="_blank" rel="noopener">Слайд 47</a><h3 class="slides-content text-center font-bold"><div><p>контейнер<br><p>контейнер<br><p>height=auto<br><p>horis1.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide48" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-47.jpg" target="_blank" rel="noopener">Слайд 48</a><h3 class="slides-content text-center font-bold"><div><p>Вертикальное форматирование<br><p>Высота по содержимому (auto)<br>Или через height. Если содержимого больше чем height –</div></h3></h3><!----><!----><div class="slides-content">прокрутка<br>margin-top или bottom равное auto = 0<br>Высота в процентах – от блока контейнера, но…<br>Центрирование по вертикали через процентные margin и высоту блока-контейнера<br>Сворачивание полей<br>Отрицательные margin<br><p>vert1.html, vert2.html,<br>negative_margins.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide49" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-48.jpg" target="_blank" rel="noopener">Слайд 49</a><h3 class="slides-content text-center font-bold"><div><p>Сворачивание вертикальных полей<br><p>margins.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide50" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-49.jpg" target="_blank" rel="noopener">Слайд 50</a><h3 class="slides-content text-center font-bold"><div><p>Форматирование строчных элементов<br><p>Многострочный строковый элемент, рамки, фон<br>Строковый блок и контейнер строки<br>Отступы, рамки и</div></h3></h3><!----><!----><div class="slides-content">поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых<br>Вспомним line-height<br>Если в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока<br><p>str_format.htm<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide51" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-50.jpg" target="_blank" rel="noopener">Слайд 51</a><h3 class="slides-content text-center font-bold"><div><p>Изменение представления элемента<br><p>display: block | inline | inline-table | list-item | none |</div></h3></h3><!----><!----><div class="slides-content">run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block<br>Пример употребления display:block<br>Пример употребления display:inline<br>display определяет только лишь представление элемента, но не его тип, не его суть<br>display: inline-block<br>Иногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)<br><p>display1.html<br>display_inline_block.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide52" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-51.jpg" target="_blank" rel="noopener">Слайд 52</a><h3 class="slides-content text-center font-bold"><div><p>Поля<br><p>По умолчанию margin=0<br>У некоторых элементов есть поля по умолч.<br>img {margin: 1em;}<br>img {margin: 1em</div></h3></h3><!----><!----><div class="slides-content">2em 3em 4em;}<br>img {margin: 1em 2em;}<br>img {margin: 1em 2em 3em;}<br>Процентные значения от ширины родительского элемента<br>margin-left, margin-right, margin-top, margin-bottom<br>Поля строковых элементов (левое и правое)<br><p>top<br><p>bottom<br><p>right<br><p>left<br><p>margin-percent.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide53" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-52.jpg" target="_blank" rel="noopener">Слайд 53</a><h3 class="slides-content text-center font-bold"><div><p>Рамки<br><p>Рамки внутри полей, они ограничивают фон<br>Ширина, стиль, цвет<br>Ширина по умолч.=medium или none<br>Цвет по</div></h3></h3><!----><!----><div class="slides-content">умолч.=цвет элемента<br>border-style: стиль (TRBL) или отдельно<br>border-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены<br>Если border-style=none, то border-width=0<br>border-color: color (TRBL) или отдельно<br>Цвет рамки может = transparent<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide54" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-53.jpg" target="_blank" rel="noopener">Слайд 54</a><h3 class="slides-content text-center font-bold"><div><p>Рамки, стили рамок<br><p>border-top, border-right, border-bottom, border-left: border-width || border-style || color <br>border: border-width</div></h3></h3><!----><!----><div class="slides-content">|| border-style || color<br>У строковых элементов тоже могут быть<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide55" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-54.jpg" target="_blank" rel="noopener">Слайд 55</a><h3 class="slides-content text-center font-bold"><div><p>Отступы<br><p>padding: значение (любые меры, проценты) (TRBL)<br>Залиты фоном<br>Отступы не сворачиваются<br>% относительно ширины родителя (причем</div></h3></h3><!----><!----><div class="slides-content">и верхние и нижние поля)<br>padding-top, padding-right, padding-bottom, padding-left<br>Можно применять к строковым элементам<br><p>paddings.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide56" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-55.jpg" target="_blank" rel="noopener">Слайд 56</a><h3 class="slides-content text-center font-bold"><div><p>Цвета, фон <br><p>color: <цвет> | inherit<br>Свойство color для элементов форм<br>background-color: цвет | transparent</div></h3></h3><!----><!----><div class="slides-content">(умолч.)<br>background-image: url(путь к файлу) | none <br>background-color + background-image<br>background-repeat: no-repeat | repeat | repeat-x | repeat-y<br><p>colors-css.html,<br>background_css.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide57" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-56.jpg" target="_blank" rel="noopener">Слайд 57</a><h3 class="slides-content text-center font-bold"><div><p>Фон<br><p>background-position: [проценты | значение] | [left | center | right] || [top |</div></h3></h3><!----><!----><div class="slides-content">center | bottom]
(если одно задано, второе – center)<br>background-attachment: fixed | scroll
(http://www.meyerweb.com/eric/css/edge/complexspiral/glassy.html)<br>background: background-attachment || background-color || background-image || background-position || background-repeat<br><p>background_css.html,<br>background2_css.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide58" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-57.jpg" target="_blank" rel="noopener">Слайд 58</a><h3 class="slides-content text-center font-bold"><div><p>Перемещение, плавающая модель<br><p>Рисунки, параграф с float<br>Задание ширины обязательно<br>Поля не сворачиваются<br>Перемещаемый элемент генерирует блочный</div></h3></h3><!----><!----><div class="slides-content">элемент<br>Правила перемещаемых элементов (стр.327)<br>Перемещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков<br>Отрицательные поля<br>Если ширина больше – перемещаемый элемент окажется за боковым краем родителя<br>clear: both | left | none | right<br><p>float1.html, float2.html<br>float3.html, float_problem.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide59" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-58.jpg" target="_blank" rel="noopener">Слайд 59</a><h3 class="slides-content text-center font-bold"><div><p>Позиционирование<br><p>position: absolute | fixed | relative | static<br>static – нормальный поток<br>relative – смещение</div></h3></h3><!----><!----><div class="slides-content">элемента с теми же размерами и начальными координатами<br>absolute – удаление из нормального потока.
Генерация структурного блока.<br>fixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide60" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-59.jpg" target="_blank" rel="noopener">Слайд 60</a><h3 class="slides-content text-center font-bold"><div><p>Позиционирование 2<br><p>Блок-контейнер для элементов с position = relative | static – родитель <br>Блок-контейнер</div></h3></h3><!----><!----><div class="slides-content">для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide61" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-60.jpg" target="_blank" rel="noopener">Слайд 61</a><h3 class="slides-content text-center font-bold"><div><p>Свойства смещения<br><p>top, right, bottom, left: <длина> | <процентное значение> | auto | inherit<br>Ширина</div></h3></h3><!----><!----><div class="slides-content">и высота<br>min-width, min-height: <длина> | <процентное значение> | inherit<br>max-width, max-height: <длина> | <процентное значение> | none | inherit<br><p>position.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide62" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-61.jpg" target="_blank" rel="noopener">Слайд 62</a><h3 class="slides-content text-center font-bold"><div><p>Переполнение и отсечение содержимого<br><p>overflow: visible | hidden | scroll | auto | inherit<br>overflow-x</div></h3></h3><!----><!----><div class="slides-content">и overflow-y<br>clip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit <br><p>overflow.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide63" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-62.jpg" target="_blank" rel="noopener">Слайд 63</a><h3 class="slides-content text-center font-bold"><div><p>Видимость элементов<br><p>visibility: visible | hidden | collapse | inherit<br><p>visibility.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide64" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-63.jpg" target="_blank" rel="noopener">Слайд 64</a><h3 class="slides-content text-center font-bold"><div><p>Абсолютное позиционирование<br><p>Абсолютное позиционирование относительно…<br>Перекрытие элементов<br>Размеры и размещение <br>left + margin-left + border-left-width +</div></h3></h3><!----><!----><div class="slides-content">padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера<br>Значение auto<br>right или bottom компенсируют, если все свойства заданы<br><p>position_abs.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide65" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-64.jpg" target="_blank" rel="noopener">Слайд 65</a><h3 class="slides-content text-center font-bold"><div><p>Размещение по оси z<br><p>z-index: число | auto<br>Может быть отрицательным<br>Локальный контекст
занесения в стек<br><p>окно<br><p>А<br><p>Б<br><p>z-index.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide66" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-65.jpg" target="_blank" rel="noopener">Слайд 66</a><h3 class="slides-content text-center font-bold"><div><p>Фиксированное позиционирование<br><p>Относительно окна браузера<br>Удобно, например, для баннеров или для меню<br><p>position_fixed.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide67" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-66.jpg" target="_blank" rel="noopener">Слайд 67</a><h3 class="slides-content text-center font-bold"><div><p>Относительное позиционирование<br><p>Смещение относительно текущего положения<br><p>position_relative.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide68" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-67.jpg" target="_blank" rel="noopener">Слайд 68</a><h3 class="slides-content text-center font-bold"><div><p>Верстка таблиц<br><p>Объединять ячейки через CSS нельзя<br>У ячеек нет полей<br><p>Свойство display<br><p>tables2.html<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide69" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-68.jpg" target="_blank" rel="noopener">Слайд 69</a><h3 class="slides-content text-center font-bold"><div><p>Таблицы. Продолжение<br><p>display: inline-table – таблица строкового уровня (типа inline-block)<br>Значения можно присвоить любым элементам</div></h3></h3><!----><!----><div class="slides-content">и сделать на основе них таблицу<br>Анонимные объекты таблицы<br><table>
<td>Name:</td>
<td><input type="text"></td>
</table><br><p>tables2.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide70" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-69.jpg" target="_blank" rel="noopener">Слайд 70</a><h3 class="slides-content text-center font-bold"><div><p>Таблицы. Продолжение<br><p>Слои таблицы<br>caption-side: top |
bottom<br>border-collapse:
collapse | separate |
inherit<br>border-spacing: <длина гор.> <длина верт.>?</div></h3></h3><!----><!----><div class="slides-content">| inherit<br>empty-cells: show | hide | inherit<br><p>tables3.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide71" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-70.jpg" target="_blank" rel="noopener">Слайд 71</a><h3 class="slides-content text-center font-bold"><div><p>Сливающиеся рамки ячеек<br><p>Если display: table | inline-table у элемента не может быть отступов,</div></h3></h3><!----><!----><div class="slides-content">только поля<br>Рамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов<br>Между рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются<br><p>tables3.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide72" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-71.jpg" target="_blank" rel="noopener">Слайд 72</a><h3 class="slides-content text-center font-bold"><div><p>Размеры таблиц<br><p>Ширина<br>table-layout: auto | fixed | inherit<br>Скорость рендера с фиксированной шириной больше<br>Если сумма</div></h3></h3><!----><!----><div class="slides-content">ширин столбцов больше ширины таблицы, то берется первое<br>Высота: или заданная или как сумма высот строк<br>Вертикальное выравнивание – не то же самое что и для строковых элементов<br><p>tables4.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide73" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-72.jpg" target="_blank" rel="noopener">Слайд 73</a><h3 class="slides-content text-center font-bold"><div><p>Элементы списка<br><p>Управлять размещением сложно<br>list-style-position: inside | outside – вне содержимого или как строковый</div></h3></h3><!----><!----><div class="slides-content">маркер в начале содержимого<br>list-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none<br>list-style-image: none | url('путь к файлу')<br>list-style: list-style-type || list-style-position || list-style-image<br><p>lists_css.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide74" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-73.jpg" target="_blank" rel="noopener">Слайд 74</a><h3 class="slides-content text-center font-bold"><div><p>Генерируемое содержимое<br><p>Например маркеры списка…<br>a[href]:before {content: "(link)";}<br>Ограничения на display<br>content: строка | attr(атрибут) | open-quote</div></h3></h3><!----><!----><div class="slides-content">| close-quote | no-open-quote | no-close-quote | url }<br>Теги недопустимы<br>Генерируемые кавычки<br>Счетчики <br>counter-reset и counter-increment<br><p>css_gen_content.html<br>css_gen_content2.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide75" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-74.jpg" target="_blank" rel="noopener">Слайд 75</a><h3 class="slides-content text-center font-bold"><div><p>Курсоры<br><p>cursor: [[<uri>,]* [auto | default | pointer | crosshair | move | e-resize</div></h3></h3><!----><!----><div class="slides-content">| ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit<br>a[href] {cursor: pointer;}<br><p>cursors.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide76" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-75.jpg" target="_blank" rel="noopener">Слайд 76</a><h3 class="slides-content text-center font-bold"><div><p>Курсоры<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide77" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/398426/slide-76.jpg" target="_blank" rel="noopener">Слайд 77</a><h3 class="slides-content text-center font-bold"><div><p>Контуры<br><p>Ну участвуют в потоке документа<br>Могут употребляться вместе с рамками<br>outline-style: none | dotted |</div></h3></h3><!----><!----><div class="slides-content">dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)<br>outline-width: thin | medium | thick | <длина> | inherit<br>outline-color: <цвет> | invert | inherit<br>outline: [ <outline-color> || <outline-style> || <outline-width> ] | inherit<br><p>outline.html<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: HTML+CSS,-верстка.pptx <br> Количество просмотров: 24 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/pedagogika/shveynaya-mashina-operatsii-pri-mashinnoy-obrabotke" class="navigation-link">Швейная машина. Операции при машинной обработке изделия (технология)</a></div><div class="navigation-item"><div>Следующая -</div><a href="/istoriya/gorod-rim" class="navigation-link">Город Рим</a></div></div></div></div><div class="item-layoutRelated"><div class="section"><div></div></div></div></div><div class="item-layout"><div class="related"><h2 class="related-header">Похожие презентации</h2><div class="related-wrapper"><!--[--><div class="related-item"><a href="/informatika/programmirovanie-na-yazyke-paskal-69" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/413342/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/413342/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/413342/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/413342/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/413342/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программирование на языке Паскаль</a></div><div class="related-item"><a href="/informatika/cross-border-e-commerce-in-china" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/9505/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/9505/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/9505/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/9505/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/9505/slide-0.jpg 1440w" class="slides-image related-itemImage"> Cross-border e-commerce in China</a></div><div class="related-item"><a href="/informatika/razrabotka-arm-menedzhera-okonnogo-kombinata-na" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116311/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/116311/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/116311/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/116311/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116311/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка АРМ менеджера оконного комбината на примере ООО Светоч в среде Delphi 6.0</a></div><div class="related-item"><a href="/informatika/programmnoe-obespechenie-personalnogo-kompyutera-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/352405/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/352405/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/352405/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/352405/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/352405/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программное обеспечение персонального компьютера</a></div><div class="related-item"><a href="/informatika/svoya-igra-informatika-5-klass" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/510705/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/510705/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/510705/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/510705/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/510705/slide-0.jpg 1440w" class="slides-image related-itemImage"> Своя игра информатика 5 класс</a></div><div class="related-item"><a href="/informatika/istochniki-i-kanaly-utechki-informatsii-osnovy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/596761/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/596761/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/596761/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/596761/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/596761/slide-0.jpg 1440w" class="slides-image related-itemImage"> Источники и каналы утечки информации. Основы технической защиты информации</a></div><div class="related-item"><a href="/informatika/bezopasnost-v-seti-internet-11" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/159609/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/159609/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/159609/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/159609/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/159609/slide-0.jpg 1440w" class="slides-image related-itemImage"> Безопасность в сети Интернет</a></div><div class="related-item"><a href="/informatika/struktury-i-algoritmy-kompyuternoy-obrabotki-dannyh" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169877/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/169877/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/169877/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/169877/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169877/slide-0.jpg 1440w" class="slides-image related-itemImage"> Структуры и алгоритмы компьютерной обработки данных</a></div><div class="related-item"><a href="/informatika/vikoristannya-vbudovanih-funktsy-v-tablichnomu-protsesor" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/336452/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/336452/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/336452/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/336452/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/336452/slide-0.jpg 1440w" class="slides-image related-itemImage"> Використання вбудованих функцій в табличному процесорі MS Excel</a></div><div class="related-item"><a href="/informatika/tehnicheskoe-obespechenie-informatsionnyh-tehnologiy-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384273/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/384273/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/384273/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/384273/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/384273/slide-0.jpg 1440w" class="slides-image related-itemImage"> Техническое обеспечение информационных технологий</a></div><div class="related-item"><a href="/informatika/organizatsiya-otdyha-detey-v-kanikulyarnoe-vremya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192760/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/192760/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/192760/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/192760/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192760/slide-0.jpg 1440w" class="slides-image related-itemImage"> Организация отдыха детей в каникулярное время</a></div><div class="related-item"><a href="/informatika/kollektsionnye-kompyuternye-kartochnye-igry-na-dvoih" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/266837/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/266837/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/266837/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/266837/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/266837/slide-0.jpg 1440w" class="slides-image related-itemImage"> Коллекционные компьютерные карточные игры на двоих</a></div><div class="related-item"><a href="/informatika/struktura-kesh-pamyati-protsessora" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/288041/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/288041/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/288041/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/288041/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/288041/slide-0.jpg 1440w" class="slides-image related-itemImage"> Структура кэш-памяти процессора</a></div><div class="related-item"><a href="/informatika/training-material-software-licensing-basics" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/92083/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/92083/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/92083/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/92083/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/92083/slide-0.jpg 1440w" class="slides-image related-itemImage"> Training material. Software licensing basics</a></div><div class="related-item"><a href="/informatika/nebezpeka-v-nternet" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/201519/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/201519/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/201519/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/201519/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/201519/slide-0.jpg 1440w" class="slides-image related-itemImage"> Небезпека в інтернеті</a></div><div class="related-item"><a href="/informatika/filtratsiya-dannyh" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/296855/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/296855/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/296855/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/296855/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/296855/slide-0.jpg 1440w" class="slides-image related-itemImage"> Фильтрация данных</a></div><div class="related-item"><a href="/informatika/preobrazovanie-informatsii-putyom-rassuzhdeniy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/273320/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/273320/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/273320/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/273320/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/273320/slide-0.jpg 1440w" class="slides-image related-itemImage"> Преобразование информации путём рассуждений</a></div><div class="related-item"><a href="/informatika/teoreticheskie-osnovy-informatiki-17" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/269997/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/269997/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/269997/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/269997/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/269997/slide-0.jpg 1440w" class="slides-image related-itemImage"> Теоретические основы информатики</a></div><div class="related-item"><a href="/informatika/prezentatsiya-po-teme-vnedrenie-i-ispolzovanie" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/544269/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/544269/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/544269/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/544269/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/544269/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация по теме: Внедрение и использование ИКТ в практике работы ДОУ Диск</a></div><div class="related-item"><a href="/informatika/razrabotka-spravochnoy-sistemy-2gis-v-sredah" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/224307/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/224307/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/224307/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/224307/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/224307/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка справочной системы 2GIS, в средах программирования HTMLHelpWorkshop и HTM2CHM</a></div><div class="related-item"><a href="/informatika/razrabotka-programmnogo-obespecheniya-software-engineering-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/150357/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/150357/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/150357/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/150357/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/150357/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка программного обеспечения (Software Engineering)</a></div><div class="related-item"><a href="/informatika/yazyk-programmirovaniya-pascal-protsedury-i-funktsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/117354/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/117354/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/117354/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/117354/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/117354/slide-0.jpg 1440w" class="slides-image related-itemImage"> Язык программирования Pascal. Процедуры и функции</a></div><div class="related-item"><a href="/informatika/algoritmdeu-zhne-programmalau" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/91803/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/91803/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/91803/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/91803/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/91803/slide-0.jpg 1440w" class="slides-image related-itemImage"> Алгоритмдеу жєне программалау</a></div><div class="related-item"><a href="/informatika/prezentatsiya-k-uroku-ponyatie-informatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/560705/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/560705/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/560705/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/560705/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/560705/slide-0.jpg 1440w" class="slides-image related-itemImage"> Презентация к уроку Понятие информации</a></div><div class="related-item"><a href="/informatika/kiberprestupnost-7" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/587325/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/587325/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/587325/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/587325/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/587325/slide-0.jpg 1440w" class="slides-image related-itemImage"> Киберпреступность</a></div><div class="related-item"><a href="/informatika/mis-v-lpu" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1321/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/1321/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/1321/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/1321/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/1321/slide-0.jpg 1440w" class="slides-image related-itemImage"> МИС в ЛПУ</a></div><div class="related-item"><a href="/informatika/bazy-i-banki-dannyh-istoriya-razvitiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/2049/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/2049/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/2049/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/2049/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/2049/slide-0.jpg 1440w" class="slides-image related-itemImage"> Базы и банки данных. История развития ВТ и СУБД</a></div><div class="related-item"><a href="/informatika/informatsionnye-optimizatsionnye-modeli" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/243509/slide-0.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/243509/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/243509/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/243509/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/243509/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационные оптимизационные модели</a></div><!--]--></div></div></div></div><!--]--><!--]--><!--]--></div></div></main><footer class="footer"><div class="layout"><!----><div class="footer-contacts"><svg class="footer-contactsIcon" viewBox="0 0 27 26" xmlns="http://www.w3.org/2000/svg"><use xlink:href="/images/icons.svg#contacts"></use></svg> Обратная связь</div><!----><div class="footer-contactsEmail"> Email: <span class="footer-contactsShow">Нажмите что бы посмотреть</span></div></div></footer></div><!--]--></div><script>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:398426,name:k,category:G,count:78,jpg:"jpg\u002F398426",hits:H,download:b,h1:"HTML+CSS, верстка презентация",meta:{h1:k,title:k,description:"HTML+CSS, верстка презентация на тему, доклад, Информатика",keywords:"HTML+CSS, верстка, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему HTML+CSS, верстка из раздела Информатика. Презентация на заданную тему содержит 78 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EКороткое введение\u003Cbr\u003E\u003Cp\u003EПоследний стандарт HTML – версия 5\u003Cbr\u003EXHML – переработанный HTML в соответствии со стандартом XML\u003Cbr\u003EСтандарты неоднозначны, не все моменты регламентированы \u003Cbr\u003EПридерживайтесь стандартов, осторожнее с нестандартными решениями\u003Cbr\u003E\u003Cbr\u003E \u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml lang=\"ru-ru\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаготовка\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\"\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cheader\u003E\u003C\u002Fheader\u003E\u003Cbr\u003E \u003Cfooter\u003E\u003C\u002Ffooter\u003E\u003Cbr\u003E \u003Cscript src=\"https:\u002F\u002Fcode.jquery.com\u002Fjquery-3.2.1.min.js\"\u003E\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E",file:"HTML+CSS,-верстка.pptx",texts:["\u003Cp\u003EHTML+CSS (верстка)\u003Cbr\u003E","\u003Cp\u003EКороткое введение\u003Cbr\u003E\u003Cp\u003EПоследний стандарт HTML – версия 5\u003Cbr\u003EXHML – переработанный HTML в соответствии со стандартом XML\u003Cbr\u003EСтандарты неоднозначны, не все моменты регламентированы \u003Cbr\u003EПридерживайтесь стандартов, осторожнее с нестандартными решениями\u003Cbr\u003E","\u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml lang=\"ru-ru\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаготовка\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003Clink rel=\"stylesheet\" href=\"css\u002Fstyle.css\"\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cheader\u003E\u003C\u002Fheader\u003E\u003Cbr\u003E \u003Cfooter\u003E\u003C\u002Ffooter\u003E\u003Cbr\u003E \u003Cscript src=\"https:\u002F\u002Fcode.jquery.com\u002Fjquery-3.2.1.min.js\"\u003E\u003Cbr\u003E \u003C\u002Fscript\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E Привет, Мир!\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы и теги\u003Cbr\u003E\u003Cназвание_тега\u003E\u003Cbr\u003E\u003Cназвание_тега\u003Eсодержание тега\u003C\u002Fназвание_тега\u003E\u003Cbr\u003E\u003Cp\u003EТекст абзаца\u003C\u002Fp\u003E\u003Cbr\u003EHTML – это прежде всего содержание, данные. \r\nHTML, как правило, только лишь советует как отображать документы.\u003Cbr\u003E","\u003Cp\u003EРедакторы\u003Cbr\u003E\u003Cp\u003EWYSIWYG или текстовые процессоры\u003Cbr\u003EWebStorm\u003Cbr\u003ESublime\u003Cbr\u003EAtom\u003Cbr\u003ENotepad++\u003Cbr\u003EMicrosoft Word!?\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EБраузеры\u003Cbr\u003E\u003Cp\u003EInternet Explorer\u003Cbr\u003EEdge\u003Cbr\u003EFirefox\u003Cbr\u003EOpera\u003Cbr\u003ESafari\u003Cbr\u003EChrome\u003Cbr\u003EYandex\u003Cbr\u003EVivaldi\u003Cbr\u003E","\u003Cp\u003EДругие инструменты\u003Cbr\u003E\u003Cp\u003EFirebug – не заменим для разработки и отладки HTML, CSS, Javascript\u003Cbr\u003EPixel Perfect – плагин \r\nдля подложки рисунка\r\nдизайна при верстке\u003Cbr\u003E\u003Cbr\u003EIE Developer Toolbar,\u003Cbr\u003EIETester, \u003Cbr\u003EDebugBar for IETester \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EТеги, атрибуты. Блочные и строковые элементы\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E, \u003Chead\u003E, \u003Ctitle\u003E\u003Cbr\u003E\u003Cbody bgcolor=\"#A0BEC4\" onload=\"alert('Loaded');\"\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C!-- комментарий --\u003E\u003Cbr\u003EСемантика, логичность кода\r\n(\u003Cstrong\u003E, \u003Cem\u003E, \u003Cblockquote\u003E, \u003Ccode\u003E, …)\u003Cbr\u003EСпецсимволы: < > …\u003Cbr\u003E\u003Cp\u003E, \u003Ch1\u003E, \u003Ch2\u003E, \u003Ch3\u003E, …, \u003Cbr\u003E, \u003Chr\u003E\u003Cbr\u003E\u003Ca href=\"url\"\u003Eтекст\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cimg src=\"url\" title=\"текст\"\u003E\u003Cbr\u003EВложенность тегов\u003Cbr\u003E\u003Cp\u003Etest.html\u003Cbr\u003E","\u003Cp\u003EОбработка ошибок, DTD\u003Cbr\u003E\u003Cp\u003EОтсутствующие теги – плохая практика\r\n\u003Cp\u003EПервый абзац \u003Cp\u003EВторой абзац \u003Ch2\u003EЗаголовок\u003Cbr\u003EИгнорирование лишних тегов \r\n \u003Cp\u003EПервый абзац \u003Cp\u003E\u003Cp\u003EВторой абзац \u003Cuktag\u003E\u003Cbr\u003EXHTML – намного строже\u003Cbr\u003E - не правильно, \u003Cbr \u002F\u003E - правильно\u003Cbr\u003EРегистр символов в названии тегов\u003Cbr\u003E\u003Cb\u003Eтекст \u003Ci\u003Eтекст \u003C\u002Fb\u003Eтекст\u003C\u002Fi\u003E - не правильно\u003Cbr\u003EОбязательные теги, например \u003Chtml\u003E\u003Cbr\u003EИнструменты проверки кода на ошибки: HTML – валидатор\u003Cbr\u003E\u003C!DOCTYPE html PUBLIC \"-\u002F\u002FW3C\u002F\u002FDTD XHTML 1.0 Strict\u002F\u002FEN\" \"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fxhtml1\u002FDTD\u002Fxhtml1-strict.dtd\"\u003E\u003Cbr\u003E\u003Cp\u003Eerror.html, error2.html\u003Cbr\u003E","\u003Cp\u003EТекст\u003Cbr\u003E\u003Cp\u003EТекст, абзацы, перевод строки\u003Cbr\u003EЛишние пробельные символы не учитываются\u003Cbr\u003E\u003Cp align=\"left\" class=\"log\" lang=\"ru\" id=\"loginfo\" style=\"color:blue\" title=\"Некоторая статистическая информация\"\u003EСкачано 10Кб\u003C\u002Fp\u003E\u003Cbr\u003EЗаголовки, значение заголовков\u003Cbr\u003E и \u003Cnobr\u003E — все браузеры поддерживают, но…\u003Cbr\u003E\u003Cpre\u003E — блок предварительно форматированного текста (все пробелы, переводы строк, и т.д., монош. шрифт)\u003Cbr\u003EФизическая и логическая разметка\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etext.html\u003Cbr\u003E","\u003Cp\u003EШрифт\u003Cbr\u003E\u003Cp\u003EНемного терминов\u003Cbr\u003EНазвание шрифта, семейство (serif, \r\nsans-serif, monospace…)\u003Cbr\u003EРазмер\u003Cbr\u003EЦвет\u003Cbr\u003EМежсимвольное \r\nрасстояние\u003Cbr\u003EКурсив, жирность\u003Cbr\u003E\u003Cfont size=5 color=\"#FFFFFF\" face=\"Courier, Arial\"\u003E\r\nБ\u003C\u002Ffont\u003Eуква\u003Cbr\u003E","\u003Cp\u003EТеги логической разметки текста\u003Cbr\u003E\u003Cp\u003EНе гарантируется именно такое отображение\u003Cbr\u003E","\u003Cp\u003EОсновные теги физической разметки\u003Cbr\u003E\u003Cp\u003EНе гарантируется именно такое отображение\u003Cbr\u003EСодержимое вышеупомянутых тегов – любые элементы допустимые в тексте.\u003Cbr\u003EУпотребляться могут везде, где применяются элементы, относящиеся к тексту.\u003Cbr\u003E","\u003Cp\u003EЦитаты, адреса\u003Cbr\u003E\u003Cp\u003E\u003Cblockquote\u003E и \u003Cq\u003E — цитаты (длинная и короткая)\r\n\u003Cblockquote cite=\"http:\u002F\u002Flib.ru\u002F\" lang=\"en\" style=\"color:green;\"\u003EДлииинная цитата\u003C\u002Fblockquote\u003E\u003Cbr\u003E\u003Caddress\u003EАдрес\u003C\u002Faddress\u003E - адрес\u003Cbr\u003E","\u003Cp\u003EЛинейки \u003Cbr\u003E\u003Cp\u003E\u003Chr align=\"center\" color=\"#000000\" size=\"3\" width=\"50%\"\u003E\u003Cbr\u003EИспользование атрибутов не рекомендуется\u003Cbr\u003EЧасто используется для логического отделения информационных блоков\u003Cbr\u003E\u003Cp\u003Eline.html\u003Cbr\u003E","\u003Cp\u003EИзображения в документе HTML\u003Cbr\u003E\u003Cp\u003EФормат? Все зависит от браузеров, в HTML нет спецификаций\u003Cbr\u003EФормат GIF\u003Cbr\u003Eсжатие \"без потерь\"\u003Cbr\u003E256 цветов максимум\u003Cbr\u003Eчересстрочный (всплывающий) и нормальный формат\u003Cbr\u003Eпрозрачность\u003Cbr\u003Eанимация\u003Cbr\u003E","\u003Cp\u003EФормат JPEG\u003Cbr\u003E24 битная палитра (16 млн цветов)\u003Cbr\u003Eпотеря качества рисунка\u003Cbr\u003EФормат PNG\u003Cbr\u003Eцветовые схемы:\u003Cbr\u003Etruecolor\u003Cbr\u003Egrayscale\u003Cbr\u003Eиндексированная палитра (GIF-подобная) – PNG-8\u003Cbr\u003Eальфа канал на 254 уровня\u003Cbr\u003Eулучшенное сжатие без потерь\u003Cbr\u003Eдвухмерное чередование\u003Cbr\u003Eгамма-коррекция\u003Cbr\u003EФормат MNG\u003Cbr\u003E",a,a,a,a,"\u003Cp\u003EИтог\u003Cbr\u003E\u003Cp\u003EJPEG – для фотографий, изображений с большим количеством градиентов и цветов\u003Cbr\u003EGIF – для маленьких рисунков, иконок, пиктограмм, полезен, когда края – четкие\u003Cbr\u003EPNG8 – когда не много цветов, четкие края, например скриншоты windows - окон\u003Cbr\u003EPNG24 – полупрозрачности, изображение без потери качества, большое количество цветов\u003Cbr\u003E","\u003Cp\u003EПрименение изображений в HTML\u003Cbr\u003E\u003Cp\u003E\u003Cimg src=\"\u002Fimages\u002Fscreenshot.png\" alt=\"Скриншот\" title=\"Скриншот\" border=\"1\" align=\"middle\" width=\"50\" height=\"70\"\u003E\u003Cbr\u003Ealign=\"bottom | left | middle | right | top\"\u003Cbr\u003EЗаливка с помощью width или height\u003Cbr\u003EБывает, что изображения отключены…\u003Cbr\u003Eismap, usemap\u003Cbr\u003EonAbort – только ie, onError, onLoad\u003Cbr\u003EФоновые изображения\u003Cbr\u003E\u003Cp\u003Eimages.html\u003Cbr\u003E","\u003Cp\u003EГиперссылки\u003Cbr\u003E\u003Cp\u003EОснова гипертекста\u003Cbr\u003EURL \r\nscheme:scheme_specific_part\r\n\u003Cсхема\u003E:\u002F\u002F\u003Cлогин\u003E:\u003Cпароль\u003E@\u003Cхост\u003E:\u003Cпорт\u003E\u002F\u003CURL‐путь\u003E\r\nhttp:\u002F\u002Fru.wikipedia.org:80\u002Fwiki\u002FHTTP?get#GET\r\n\u003Ca id=\"GET\" name=\"GET\"\u003E\u003C\u002Fa\u003E\u003Cbr\u003EТолько US-ACSII – символы\u003Cbr\u003Ehttp:\u002F\u002Fyandex.ru\u002Fyandsearch?text=%2F+%D0%BA%D0%BE%D0%B4%20%2F (\u002F код \u002F)\u003Cbr\u003E\u003Ca href=\"foto.jpg\" target=\"_blank\"\u003Efoto\u003C\u002Fa\u003E - ссылка с относительным адресом\u003Cbr\u003Emailto:mail@mail.ru?subject=Subject\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Elinks.html, folder1\u002Flinks.html\u003Cbr\u003E","\u003Cp\u003EОтношения. Мета-теги.\u003Cbr\u003E\u003Cp\u003EМы имеем дело не с документом, а с проектом, набором документов\u003Cbr\u003E\u003Chead\u003E\r\n\u003Cbase href=\"http:\u002F\u002Frezonans.ru\u002F\" \u002F\u003E\r\n\u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"style.css\" \u002F\u003E\r\n\u003Cmeta http-equiv=\"Content-Type\" content=\"text\u002Fhtml; charset=utf-8\" \u002F\u003E\r\n\u003Cmeta name=\"generator\" content=\"MediaWiki 1.16alpha-wmf\" \u002F\u003E\r\n\u003Cmeta name=\"keywords\" content=\"ASCII,Ref-en,Английский язык,Соединённые Штаты Америки,Стандарт,Код,Информация,Диакритический знак,Акут,Man (Unix),Язык\" \u002F\u003E\r\n\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cp\u003Erelations.html\u003Cbr\u003E","\u003Cp\u003EСписки\u003Cbr\u003E\u003Cp\u003E\u003Cul type=\"square\"\u003E\u003Cbr\u003E\t\u003Cli\u003EСтраны\u003Cbr\u003E\t\t\u003Cul type=\"circle\"\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EАнглия\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\t\u003Cli\u003EШвейцария\u003C\u002Fli\u003E\u003Cbr\u003E\t\t\u003C\u002Ful\u003E\u003Cbr\u003E\t\u003C\u002Fli\u003E\u003Cbr\u003E\t\u003Cli\u003EГорода\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Ful\u003E\u003Cbr\u003E\u003Col type=\"A\" start=\"3\"\u003E\u003Cbr\u003E\u003C!-- A, a, I, i, 1 --\u003E\u003Cbr\u003E\t\u003Cli\u003EКрокодил Гена\u003C\u002Fli\u003E\u003Cbr\u003E\t\u003Cli value=\"6\"\u003EЧебурашка\u003C\u002Fli\u003E\u003Cbr\u003E\u003C\u002Fol\u003E\u003Cbr\u003E\u003Cp\u003Erelations.html\u003Cbr\u003E","\u003Cp\u003EСписки определений\u003Cbr\u003E\u003Cp\u003E\u003Cdl\u003E\u003Cbr\u003E\t\u003Cdt\u003EТермин 1\u003C\u002Fdt\u003E\u003Cbr\u003E\t\u003Cdd\u003EОпределение первого термина\u003C\u002Fdd\u003E\u003Cbr\u003E\t\u003Cdt\u003EТермин 2\u003C\u002Fdt\u003E\u003Cbr\u003E\t\u003Cdd\u003EОпределение второго термина\u003C\u002Fdd\u003E\u003Cbr\u003E\u003C\u002Fdl\u003E\r\n\u003Cbr\u003E\u003Cp\u003Elists.html\u003Cbr\u003E","\u003Cp\u003EФормы\u003Cbr\u003E\u003Cp\u003EПроцесс заполнения, отправки\u003Cbr\u003E\u003Cform action=\"form.php\" enctype=\"multipart\u002Fform-data\" method=\"POST\"\u003E\u003C\u002Fform\u003E\u003Cbr\u003EСобытия\u003Cbr\u003E\u003Cinput name=\"my_name\"\u003E (controls)\u003Cbr\u003Etype=text, password, file\u003Cbr\u003Esize=\"30\" maxlength=\"20\" value=\"my name\"\u003Cbr\u003Eaccept=\"image\u002F*\"\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E","\u003Cp\u003EПоля форм\u003Cbr\u003E\u003Cp\u003E\u003Cinput type=\"checkbox\" name=\"border\" value=\"top\" checked=\"checked\" \u002F\u003E \u003Cbr\u003E\u003Cinput type=\"radio\" name=\"border\" value=\"top\" checked\u003E\u003Cbr\u003E\u003Cinput type=\"submit\" value=\"отправить\" name=\"submit\"\u003E\u003Cbr\u003E\u003Cinput type=\"reset\" value=\"Сбросить форму\"\u003E\u003Cbr\u003E\u003Cinput type=\"image\" src=\"knopka.jpg\" name=\"btn\" \u002F\u003E\u003Cbr\u003E\u003Cinput type=\"button\" value=\"надпись\"\u003E\u003Cbr\u003E\u003Cinput type=\"hidden\" name=\"user\" value=\"34tr3sdf\" \u002F\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E","\u003Cp\u003EПоля форм 2\u003Cbr\u003E\u003Cp\u003E\u003Cbutton type=\"submit\" \u003E\u003Cimg src=\"btn.gif\" alt=\"btn\" \u002F\u003E текст\u003C\u002Fbutton\u003E\u003Cbr\u003E\u003Ctextarea name=\"longtext\" rows=\"10\" cols=\"40\"\u003E\u003C\u002Ftextarea\u003E\u003Cbr\u003E\u003Cselect name=\"xxx\" multiple=\"multiple\" size=\"5\"\u003E\u003Coption selected=\"selected\"\u003Etexxxt\u003C\u002Foption\u003E\u003C\u002Fselect\u003E\u003Cbr\u003Eaccesskey, disabled, readonly\u003Cbr\u003E\u003Clabel for=\"name-field\"\u003EВведите имя:\u003C\u002Flabel\u003E\r\n\u003Cinput name=\"name\" id=\"name-field\" \u002F\u003E\u003Cbr\u003E\u003Cfieldset\u003E\u003Clegend align=\"top\"\u003E\u003C\u002Flegend\u003E\u003C\u002Ffieldset\u003E\u003Cbr\u003E\u003Cp\u003Eforms.html\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Ftrevordavis.net\u002Fplay\u002Finput-vs-button\u002F\u003Cbr\u003E","\u003Cp\u003EТаблицы\u003Cbr\u003E\u003Cp\u003E\u003Ctable cellspacing=\"0\" cellpadding=\"0\" border=\"0\" frame=\"below\" rules=\"cols\" width=\"100%\"\u003E\r\n\u003Ccaption\u003EНазвание таблицы\u003C\u002Fcaption\u003E\r\n\u003Cthead\u003E\r\n\u003Ctr align=\"left\" valign=\"middle\"\u003E\r\n\u003Cth\u003E111\u003C\u002Fth\u003E\r\n\u003Ctd\u003E\u003C\u002Ftd\u003E\r\n\u003C\u002Ftr\u003E\r\n\u003C\u002Fthead\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003Ebackground, bgcolor, bordercolor, cols, height, title, nowrap\u003Cbr\u003Ecolspan, rowspan\u003Cbr\u003E\u003Ctfoot\u003E, \u003Ctbody\u003E\u003Cbr\u003E\u003Ccolgroup\u003E, \u003Ccol\u003E\u003Cbr\u003E\u003Cp\u003Etables.html\u003Cbr\u003E","\u003Cp\u003EФреймы\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Chead\u003E\u003Ctitle\u003EФреймы\u003C\u002Ftitle\u003E\u003C\u002Fhead\u003E\r\n\u003Cframeset rows=\"30%, *\"\u003E\r\n\u003Cframe src=\"fr1.htm\" \u003E\u003C\u002Fframe\u003E\r\n\u003Cframe src=\"fr2.htm\"\u003E\u003C\u002Fframe\u003E\r\n\u003C\u002Fframeset\u003E\r\n\u003C\u002Fhtml\u003E\u003Cbr\u003EРамки для frameset\u003Cbr\u003Enoresize, scrolling, frameborder для frame\u003Cbr\u003E\u003Cnoframes\u003E\u003Cbr\u003E\u003Ciframe height=\"100\" width=\"400\" src=\"fr1.htm\"\u003EНе работают фреймы?\u003C\u002Fiframe\u003E\u003Cbr\u003Etarget у ссылки, \u003Cbase\u003E\u003Cbr\u003E\u003Cp\u003Eframes.html, iframe.html\u003Cbr\u003E","\u003Cp\u003EОбъекты и апплеты\u003Cbr\u003E\u003Cp\u003E\u003Cobject\u003E\r\n\u003Cparam name=\"name\" value=\"1\" \u002F\u003E\r\n\u003C\u002Fobject\u003E\u003Cbr\u003EВложенные object\u003Cbr\u003E\u003Cembed src=\"x.swf\" type=\"application\u002Fx-shockwave-flash\" \u002F\u003E\u003Cbr\u003E\u003Cp\u003Eobject.html, object.html\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fwww.i2r.ru\u002Fstatic\u002F245\u002Fout_21542.shtml - Параметры object\u003Cbr\u003E","\u003Cp\u003Ediv и span\u003Cbr\u003E\u003Cp\u003EDiv – блочный\u003Cbr\u003ESpan – строчный \u003Cbr\u003Etitle, dir, lang, style, class\u003Cbr\u003E","\u003Cp\u003ECSS 2\u003Cbr\u003E\u003Cp\u003EСтиль – это правило отображения тега\u003Cbr\u003EВстроенные стили, стили документа, внешние таблицы\u003Cbr\u003E\u003Clink\u003E или @import\u003Cbr\u003E@media – правило \u003Cbr\u003E\u002F* комментарий к стилям *\u002F\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss.html, css.css, css1.css\u003Cbr\u003E","\u003Cp\u003EСинтаксис\u003Cbr\u003E\u003Cp\u003Eseceltor {property:value; property1:value1;}\u003Cbr\u003Ep {color: red; text-decoration: underline;}\u003Cbr\u003Ep {font-family: Georgia, 'Times New Roman', Times, serif;}\u003Cbr\u003Ep {border: 1px solid red;}\u003Cbr\u003EСтиль элемента явно указан, либо унаследован, либо взят по умолчанию\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss0.html\u003Cbr\u003E","\u003Cp\u003EСелекторы\u003Cbr\u003E\u003Cp\u003Ep {} \u002F* типовой, по тегу *\u002F\u003Cbr\u003E#id1 {} \u002F* идентификатор *\u002F\u003Cbr\u003E.class1 {} \u002F* по имени класса *\u002F\u003Cbr\u003E* {} \u002F* универсальный *\u002F\u003Cbr\u003E*[align=\"right\"] {} \u002F* по атрибутам *\u002F\u003Cbr\u003Ep#id1.class1.class2 {}\u003Cbr\u003Ep:first-line {} \u002F* псевдоэлементы *\u002F\u003Cbr\u003Ediv, table, .class1 {} \u002F*групповой*\u002F\u003Cbr\u003Eul ul{} \u002F*контекст, наследующие*\u002F\u003Cbr\u003Eol \u003E li {} \u002F*дочерний*\u002F\u003Cbr\u003Eli + li {} \u002F*соседние*\u002F\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fxhtml.ru\u002F2008\u002F01\u002F08\u002Fcss-selectors - поддерживаемые в браузерах селекторы\u003Cbr\u003E\u003Cp\u003Ecss2.html\u003Cbr\u003E","\u003Cp\u003EПриоритеты стилей\u003Cbr\u003E\u003Cp\u003EСтили \r\n\u003Cbr\u003E!important\r\n\u003Cbr\u003EПорядок каскадирования:\u003Cbr\u003EПо источнику (\"ближе\" к тегу)\u003Cbr\u003EСпецифичность, более узкое, точное определение\u003Cbr\u003EПорядок следования\u003Cbr\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\u003Ecss.html, css.css, css1.css\u003Cbr\u003E","\u003Cp\u003EСпецифичность\u003Cbr\u003E\u003Cp\u003Ea – id; b – класс, псевдокласс, аттрибут; c – имя тега.\u003Cbr\u003E* {} \u002F* a=0 b=0 c=0 -\u003E специфичность = 0 *\u002F \u003Cbr\u003Eli {} \u002F* a=0 b=0 c=1 -\u003E специфичность = 1 *\u002F\u003Cbr\u003Eul li {} \u002F* a=0 b=0 c=2 -\u003E специфичность = 2 *\u002F \u003Cbr\u003Eul ol+li {} \u002F* a=0 b=0 c=3 -\u003E специфичность = 3 *\u002F\u003Cbr\u003Eul ol li.red {} \u002F* a=0 b=1 c=3 -\u003E специфичность = 13 *\u002F\u003Cbr\u003Eli.red.level {} \u002F* a=0 b=2 c=1 -\u003E специфичность = 21 *\u002F\u003Cbr\u003E#x34y {} \u002F* a=1 b=0 c=0 -\u003E специфичность = 100 *\u002F\u003Cbr\u003E\u002F* style=\"\" -\u003E специфичность = 1000 *\u002F\u003Cbr\u003E\u003Cp\u003Ecss1.html\u003Cbr\u003E","\u003Cp\u003EРазмеры, цвета, URL в CSS\u003Cbr\u003E\u003Cp\u003EКлючевые слова, inherit\u003Cbr\u003Eurl(http:\u002F\u002Flocalhost\u002F1.jpg)\u003Cbr\u003Ered, #7788AA, rgb(12,11,34)\u003Cbr\u003EРазмеры:\u003Cbr\u003Eem — ширина буквы m в настоящем шрифте. Например, \r\np {text-indent: 3em} задаст красную строку абзаца шириной в три буквы m.\u003Cbr\u003Epx — пикселы\u003Cbr\u003Ept — пункты. Один пункт = 1\u002F72 дюйма.\u003Cbr\u003E% — проценты\u003Cbr\u003Eex — ширина буквы x\u003Cbr\u003Ein — дюймы\u003Cbr\u003Ecm — сантиметры\u003Cbr\u003Emm — миллиметры\u003Cbr\u003Epc —размер в пиках. (12 пунктов).\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ekeywords.html\u003Cbr\u003E","\u003Cp\u003EШрифты\u003Cbr\u003E\u003Cp\u003Efont-family: Georgia, 'Times New Roman', Times, serif; (с засечками, без, рукописные..)\u003Cbr\u003Efont-size: larger;\u003Cbr\u003Efont-style: italic;\u003Cbr\u003Efont-variant: small-caps;\u003Cbr\u003Efont-weight: bold; (400)\u003Cbr\u003Efont: [font-style || font-variant || font-weight] font-size [\u002Fline-height] font-family\u003Cbr\u003EЗагрузка шрифтов, @font-face\u003Cbr\u003E\u003Cp\u003Efont_css.html\u003Cbr\u003E","\u003Cp\u003EСвойства текста\u003Cbr\u003E\u003Cp\u003Eletter-spacing: 2px;\u003Cbr\u003Eline-height: 120%; (наслед. вычисл. от родителя)\u003Cbr\u003Etext-align: right; \u003Cbr\u003Etext-decoration: blink | line-through | overline | underline | none\u003Cbr\u003Etext-ident: -5em;\u003Cbr\u003Etext-transform: capitalize | lowercase | uppercase | none\u003Cbr\u003Evertical-align: baseline | bottom | middle | sub | super | text-bottom | text-top | top | значение | проценты\r\n(только строк. и замещ. элементы)\u003Cbr\u003Eword-spacing: 10em;\u003Cbr\u003Ewhite-space: normal | nowrap | pre (pre в ie6 работает ☹)\u003Cbr\u003EДругие языки…\u003Cbr\u003E\u003Cp\u003Etext_css.html\u003Cbr\u003E","\u003Cp\u003EКонтейнер строки\u003Cbr\u003E","\u003Cp\u003EСвойства контейнеров\u003Cbr\u003E\u003Cp\u003EБлочная модель CSS, горизонтальное и вертикальное форматирование (по 7 свойств)\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003Etop, right, bottom, left\u003Cbr\u003E","\u003Cp\u003EГоризонтальное форматирование\u003Cbr\u003E\u003Cp\u003EЗначение auto – заполняет всю оставшуюся ширину контейнера (margin, width)\u003Cbr\u003EОтрицательные поля\u003Cbr\u003EСумма 7 размеров дочернего элемента = width родительского\u003Cbr\u003EДля замещающих элементов размеры auto равны реальным размерам\u003Cbr\u003EРазмеры замещающих элементов изменяются пропорционально, если задавать одно из них\u003Cbr\u003E\u003Cp\u003Eautowidth.html\u003Cbr\u003E","\u003Cp\u003Eконтейнер\u003Cbr\u003E\u003Cp\u003Eконтейнер\u003Cbr\u003E\u003Cp\u003Eheight=auto\u003Cbr\u003E\u003Cp\u003Ehoris1.html\u003Cbr\u003E","\u003Cp\u003EВертикальное форматирование\u003Cbr\u003E\u003Cp\u003EВысота по содержимому (auto)\u003Cbr\u003EИли через height. Если содержимого больше чем height – прокрутка\u003Cbr\u003Emargin-top или bottom равное auto = 0\u003Cbr\u003EВысота в процентах – от блока контейнера, но…\u003Cbr\u003EЦентрирование по вертикали через процентные margin и высоту блока-контейнера\u003Cbr\u003EСворачивание полей\u003Cbr\u003EОтрицательные margin\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Evert1.html, vert2.html,\u003Cbr\u003Enegative_margins.html\u003Cbr\u003E","\u003Cp\u003EСворачивание вертикальных полей\u003Cbr\u003E\u003Cp\u003Emargins.html\u003Cbr\u003E","\u003Cp\u003EФорматирование строчных элементов\u003Cbr\u003E\u003Cp\u003EМногострочный строковый элемент, рамки, фон\u003Cbr\u003EСтроковый блок и контейнер строки\u003Cbr\u003EОтступы, рамки и поля незамещаемых элементов не оказывают влияния на высоту строкового блока в отличии от замещаемых\u003Cbr\u003EВспомним line-height\u003Cbr\u003EЕсли в строке есть замещаемый элемент, то его реальная высота, padding и margin, border влияют на высоту строкового блока\u003Cbr\u003E\u003Cp\u003Estr_format.htm\u003Cbr\u003E","\u003Cp\u003EИзменение представления элемента\u003Cbr\u003E\u003Cp\u003Edisplay: block | inline | inline-table | list-item | none | run-in | table | table-caption | table-cell | table-column-group | table-footer-group | table-header-group | table-row | table-row-group | inline-block\u003Cbr\u003EПример употребления display:block\u003Cbr\u003EПример употребления display:inline\u003Cbr\u003Edisplay определяет только лишь представление элемента, но не его тип, не его суть\u003Cbr\u003Edisplay: inline-block\u003Cbr\u003EИногда значение display вычисляется в зависимости от значения свойств float или position (абс. – или table или block)\u003Cbr\u003E\u003Cp\u003Edisplay1.html\u003Cbr\u003Edisplay_inline_block.html\u003Cbr\u003E","\u003Cp\u003EПоля\u003Cbr\u003E\u003Cp\u003EПо умолчанию margin=0\u003Cbr\u003EУ некоторых элементов есть поля по умолч.\u003Cbr\u003Eimg {margin: 1em;}\u003Cbr\u003Eimg {margin: 1em 2em 3em 4em;}\u003Cbr\u003Eimg {margin: 1em 2em;}\u003Cbr\u003Eimg {margin: 1em 2em 3em;}\u003Cbr\u003EПроцентные значения от ширины родительского элемента\u003Cbr\u003Emargin-left, margin-right, margin-top, margin-bottom\u003Cbr\u003EПоля строковых элементов (левое и правое)\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etop\u003Cbr\u003E\u003Cp\u003Ebottom\u003Cbr\u003E\u003Cp\u003Eright\u003Cbr\u003E\u003Cp\u003Eleft\u003Cbr\u003E\u003Cp\u003Emargin-percent.html\u003Cbr\u003E","\u003Cp\u003EРамки\u003Cbr\u003E\u003Cp\u003EРамки внутри полей, они ограничивают фон\u003Cbr\u003EШирина, стиль, цвет\u003Cbr\u003EШирина по умолч.=medium или none\u003Cbr\u003EЦвет по умолч.=цвет элемента\u003Cbr\u003Eborder-style: стиль (TRBL) или отдельно\u003Cbr\u003Eborder-width: thin | medium | thick | значение (TRBL) или отдельно, % - запрещены\u003Cbr\u003EЕсли border-style=none, то border-width=0\u003Cbr\u003Eborder-color: color (TRBL) или отдельно\u003Cbr\u003EЦвет рамки может = transparent\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EРамки, стили рамок\u003Cbr\u003E\u003Cp\u003Eborder-top, border-right, border-bottom, border-left: border-width || border-style || color \u003Cbr\u003Eborder: border-width || border-style || color\u003Cbr\u003EУ строковых элементов тоже могут быть\u003Cbr\u003E","\u003Cp\u003EОтступы\u003Cbr\u003E\u003Cp\u003Epadding: значение (любые меры, проценты) (TRBL)\u003Cbr\u003EЗалиты фоном\u003Cbr\u003EОтступы не сворачиваются\u003Cbr\u003E% относительно ширины родителя (причем и верхние и нижние поля)\u003Cbr\u003Epadding-top, padding-right, padding-bottom, padding-left\u003Cbr\u003EМожно применять к строковым элементам\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Epaddings.html\u003Cbr\u003E","\u003Cp\u003EЦвета, фон \u003Cbr\u003E\u003Cp\u003Ecolor: \u003Cцвет\u003E | inherit\u003Cbr\u003EСвойство color для элементов форм\u003Cbr\u003Ebackground-color: цвет | transparent (умолч.)\u003Cbr\u003Ebackground-image: url(путь к файлу) | none \u003Cbr\u003Ebackground-color + background-image\u003Cbr\u003Ebackground-repeat: no-repeat | repeat | repeat-x | repeat-y\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecolors-css.html,\u003Cbr\u003Ebackground_css.html\u003Cbr\u003E","\u003Cp\u003EФон\u003Cbr\u003E\u003Cp\u003Ebackground-position: [проценты | значение] | [left | center | right] || [top | center | bottom]\r\n(если одно задано, второе – center)\u003Cbr\u003Ebackground-attachment: fixed | scroll\r\n (http:\u002F\u002Fwww.meyerweb.com\u002Feric\u002Fcss\u002Fedge\u002Fcomplexspiral\u002Fglassy.html)\u003Cbr\u003Ebackground: background-attachment || background-color || background-image || background-position || background-repeat\u003Cbr\u003E\u003Cp\u003Ebackground_css.html,\u003Cbr\u003Ebackground2_css.html\u003Cbr\u003E","\u003Cp\u003EПеремещение, плавающая модель\u003Cbr\u003E\u003Cp\u003EРисунки, параграф с float\u003Cbr\u003EЗадание ширины обязательно\u003Cbr\u003EПоля не сворачиваются\u003Cbr\u003EПеремещаемый элемент генерирует блочный элемент\u003Cbr\u003EПравила перемещаемых элементов (стр.327)\u003Cbr\u003EПеремещаемый элемент увеличивается, чтобы вместить всех перемещаемых потомков\u003Cbr\u003EОтрицательные поля\u003Cbr\u003EЕсли ширина больше – перемещаемый элемент окажется за боковым краем родителя\u003Cbr\u003Eclear: both | left | none | right\u003Cbr\u003E\u003Cp\u003Efloat1.html, float2.html\u003Cbr\u003Efloat3.html, float_problem.html\u003Cbr\u003E","\u003Cp\u003EПозиционирование\u003Cbr\u003E\u003Cp\u003Eposition: absolute | fixed | relative | static\u003Cbr\u003Estatic – нормальный поток\u003Cbr\u003Erelative – смещение элемента с теми же размерами и начальными координатами\u003Cbr\u003Eabsolute – удаление из нормального потока.\r\nГенерация структурного блока.\u003Cbr\u003Efixed – абсолютно позиционированный элемент, но блок-контейнер – окно просмотра.\u003Cbr\u003E","\u003Cp\u003EПозиционирование 2\u003Cbr\u003E\u003Cp\u003EБлок-контейнер для элементов с position = relative | static – родитель \u003Cbr\u003EБлок-контейнер для элементов с position = absolute – ближайший предок с position != static. Если ближайший предок – строковый, то контейнер – предок. Если таких элементов нет – начальный блок-контейнер\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСвойства смещения\u003Cbr\u003E\u003Cp\u003Etop, right, bottom, left: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | auto | inherit\u003Cbr\u003EШирина и высота\u003Cbr\u003Emin-width, min-height: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | inherit\u003Cbr\u003Emax-width, max-height: \u003Cдлина\u003E | \u003Cпроцентное значение\u003E | none | inherit\u003Cbr\u003E\u003Cp\u003Eposition.html\u003Cbr\u003E","\u003Cp\u003EПереполнение и отсечение содержимого\u003Cbr\u003E\u003Cp\u003Eoverflow: visible | hidden | scroll | auto | inherit\u003Cbr\u003Eoverflow-x и overflow-y\u003Cbr\u003Eclip: rect(top, right, bottom, left) | rect(Y1, X1, Y2, X2) | auto | inherit \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eoverflow.html\u003Cbr\u003E","\u003Cp\u003EВидимость элементов\u003Cbr\u003E\u003Cp\u003Evisibility: visible | hidden | collapse | inherit\u003Cbr\u003E\u003Cp\u003Evisibility.html\u003Cbr\u003E","\u003Cp\u003EАбсолютное позиционирование\u003Cbr\u003E\u003Cp\u003EАбсолютное позиционирование относительно…\u003Cbr\u003EПерекрытие элементов\u003Cbr\u003EРазмеры и размещение \u003Cbr\u003Eleft + margin-left + border-left-width + padding-left + width + padding-right + border-right-width + margin-right + right = ширина блока-контейнера\u003Cbr\u003EЗначение auto\u003Cbr\u003Eright или bottom компенсируют, если все свойства заданы\u003Cbr\u003E\u003Cp\u003Eposition_abs.html\u003Cbr\u003E","\u003Cp\u003EРазмещение по оси z\u003Cbr\u003E\u003Cp\u003Ez-index: число | auto\u003Cbr\u003EМожет быть отрицательным\u003Cbr\u003EЛокальный контекст \r\nзанесения в стек\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Eокно\u003Cbr\u003E\u003Cp\u003EА\u003Cbr\u003E\u003Cp\u003EБ\u003Cbr\u003E\u003Cp\u003Ez-index.html\u003Cbr\u003E","\u003Cp\u003EФиксированное позиционирование\u003Cbr\u003E\u003Cp\u003EОтносительно окна браузера\u003Cbr\u003EУдобно, например, для баннеров или для меню\u003Cbr\u003E\u003Cp\u003Eposition_fixed.html\u003Cbr\u003E","\u003Cp\u003EОтносительное позиционирование\u003Cbr\u003E\u003Cp\u003EСмещение относительно текущего положения\u003Cbr\u003E\u003Cp\u003Eposition_relative.html\u003Cbr\u003E","\u003Cp\u003EВерстка таблиц\u003Cbr\u003E\u003Cp\u003EОбъединять ячейки через CSS нельзя\u003Cbr\u003EУ ячеек нет полей\u003Cbr\u003E\u003Cp\u003EСвойство display\u003Cbr\u003E\u003Cp\u003Etables2.html\u003Cbr\u003E","\u003Cp\u003EТаблицы. Продолжение\u003Cbr\u003E\u003Cp\u003Edisplay: inline-table – таблица строкового уровня (типа inline-block)\u003Cbr\u003EЗначения можно присвоить любым элементам и сделать на основе них таблицу\u003Cbr\u003EАнонимные объекты таблицы\u003Cbr\u003E\u003Ctable\u003E\r\n\u003Ctd\u003EName:\u003C\u002Ftd\u003E\r\n\u003Ctd\u003E\u003Cinput type=\"text\"\u003E\u003C\u002Ftd\u003E\r\n\u003C\u002Ftable\u003E\u003Cbr\u003E\u003Cp\u003Etables2.html\u003Cbr\u003E","\u003Cp\u003EТаблицы. Продолжение\u003Cbr\u003E\u003Cp\u003EСлои таблицы\u003Cbr\u003Ecaption-side: top |\r\nbottom\u003Cbr\u003Eborder-collapse:\r\ncollapse | separate |\r\n inherit\u003Cbr\u003Eborder-spacing: \u003Cдлина гор.\u003E \u003Cдлина верт.\u003E? | inherit\u003Cbr\u003Eempty-cells: show | hide | inherit\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etables3.html\u003Cbr\u003E","\u003Cp\u003EСливающиеся рамки ячеек\u003Cbr\u003E\u003Cp\u003EЕсли display: table | inline-table у элемента не может быть отступов, только поля\u003Cbr\u003EРамки могут применяться к таблице, ячейкам, строкам, группам строк, столбцам и группам столбцов\u003Cbr\u003EМежду рамками ячеек не может быть никаких промежутков; рамки сливаются и центрируются\u003Cbr\u003E\u003Cp\u003Etables3.html\u003Cbr\u003E","\u003Cp\u003EРазмеры таблиц\u003Cbr\u003E\u003Cp\u003EШирина\u003Cbr\u003Etable-layout: auto | fixed | inherit\u003Cbr\u003EСкорость рендера с фиксированной шириной больше\u003Cbr\u003EЕсли сумма ширин столбцов больше ширины таблицы, то берется первое\u003Cbr\u003EВысота: или заданная или как сумма высот строк\u003Cbr\u003EВертикальное выравнивание – не то же самое что и для строковых элементов\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Etables4.html\u003Cbr\u003E","\u003Cp\u003EЭлементы списка\u003Cbr\u003E\u003Cp\u003EУправлять размещением сложно\u003Cbr\u003Elist-style-position: inside | outside – вне содержимого или как строковый маркер в начале содержимого\u003Cbr\u003Elist-style-type: disc | circle | square | decimal | lower-roman | upper-roman | lower-alpha | upper-alpha | none\u003Cbr\u003Elist-style-image: none | url('путь к файлу')\u003Cbr\u003Elist-style: list-style-type || list-style-position || list-style-image\u003Cbr\u003E\u003Cp\u003Elists_css.html\u003Cbr\u003E","\u003Cp\u003EГенерируемое содержимое\u003Cbr\u003E\u003Cp\u003EНапример маркеры списка…\u003Cbr\u003Ea[href]:before {content: \"(link)\";}\u003Cbr\u003EОграничения на display\u003Cbr\u003Econtent: строка | attr(атрибут) | open-quote | close-quote | no-open-quote | no-close-quote | url }\u003Cbr\u003EТеги недопустимы\u003Cbr\u003EГенерируемые кавычки\u003Cbr\u003EСчетчики \u003Cbr\u003Ecounter-reset и counter-increment\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003Ecss_gen_content.html\u003Cbr\u003Ecss_gen_content2.html\u003Cbr\u003E","\u003Cp\u003EКурсоры\u003Cbr\u003E\u003Cp\u003Ecursor: [[\u003Curi\u003E,]* [auto | default | pointer | crosshair | move | e-resize | ne-resize | nw-resize | n-resize | seresize | sw-resize | s-resize | w-resize| text | wait | help | progress ]] | inherit\u003Cbr\u003Ea[href] {cursor: pointer;}\u003Cbr\u003E\u003Cp\u003Ecursors.html\u003Cbr\u003E","\u003Cp\u003EКурсоры\u003Cbr\u003E","\u003Cp\u003EКонтуры\u003Cbr\u003E\u003Cp\u003EНу участвуют в потоке документа\u003Cbr\u003EМогут употребляться вместе с рамками\u003Cbr\u003Eoutline-style: none | dotted | dashed | solid | double | groove | ridge | inset | outset | inherit (TRBL – нет)\u003Cbr\u003Eoutline-width: thin | medium | thick | \u003Cдлина\u003E | inherit\u003Cbr\u003Eoutline-color: \u003Cцвет\u003E | invert | inherit\u003Cbr\u003Eoutline: [ \u003Coutline-color\u003E || \u003Coutline-style\u003E || \u003Coutline-width\u003E ] | inherit\u003Cbr\u003E\u003Cp\u003Eoutline.html\u003Cbr\u003E",a],href:"\u002Finformatika\u002Fhtmlcss-verstka",href_category:"\u002Finformatika",date:1659513289,related:[{id:413342,name:"Программирование на языке Паскаль",href:"\u002Finformatika\u002Fprogrammirovanie-na-yazyke-paskal-69",jpg:"jpg\u002F413342"},{id:9505,name:"Cross-border e-commerce in China",href:"\u002Finformatika\u002Fcross-border-e-commerce-in-china",jpg:"jpg\u002F9505"},{id:116311,name:"Разработка АРМ менеджера оконного комбината на примере ООО Светоч в среде Delphi 6.0",href:"\u002Finformatika\u002Frazrabotka-arm-menedzhera-okonnogo-kombinata-na",jpg:"jpg\u002F116311"},{id:352405,name:"Программное обеспечение персонального компьютера",href:"\u002Finformatika\u002Fprogrammnoe-obespechenie-personalnogo-kompyutera-8",jpg:"jpg\u002F352405"},{id:510705,name:"Своя игра информатика 5 класс",href:"\u002Finformatika\u002Fsvoya-igra-informatika-5-klass",jpg:"jpg\u002F510705"},{id:596761,name:"Источники и каналы утечки информации. Основы технической защиты информации",href:"\u002Finformatika\u002Fistochniki-i-kanaly-utechki-informatsii-osnovy",jpg:"jpg\u002F596761"},{id:159609,name:"Безопасность в сети Интернет",href:"\u002Finformatika\u002Fbezopasnost-v-seti-internet-11",jpg:"jpg\u002F159609"},{id:169877,name:"Структуры и алгоритмы компьютерной обработки данных",href:"\u002Finformatika\u002Fstruktury-i-algoritmy-kompyuternoy-obrabotki-dannyh",jpg:"jpg\u002F169877"},{id:336452,name:"Використання вбудованих функцій в табличному процесорі MS Excel",href:"\u002Finformatika\u002Fvikoristannya-vbudovanih-funktsy-v-tablichnomu-protsesor",jpg:"jpg\u002F336452"},{id:384273,name:"Техническое обеспечение информационных технологий",href:"\u002Finformatika\u002Ftehnicheskoe-obespechenie-informatsionnyh-tehnologiy-4",jpg:"jpg\u002F384273"},{id:192760,name:"Организация отдыха детей в каникулярное время",href:"\u002Finformatika\u002Forganizatsiya-otdyha-detey-v-kanikulyarnoe-vremya",jpg:"jpg\u002F192760"},{id:266837,name:"Коллекционные компьютерные карточные игры на двоих",href:"\u002Finformatika\u002Fkollektsionnye-kompyuternye-kartochnye-igry-na-dvoih",jpg:"jpg\u002F266837"},{id:288041,name:"Структура кэш-памяти процессора",href:"\u002Finformatika\u002Fstruktura-kesh-pamyati-protsessora",jpg:"jpg\u002F288041"},{id:92083,name:"Training material. Software licensing basics",href:"\u002Finformatika\u002Ftraining-material-software-licensing-basics",jpg:"jpg\u002F92083"},{id:201519,name:"Небезпека в інтернеті",href:"\u002Finformatika\u002Fnebezpeka-v-nternet",jpg:"jpg\u002F201519"},{id:296855,name:"Фильтрация данных",href:"\u002Finformatika\u002Ffiltratsiya-dannyh",jpg:"jpg\u002F296855"},{id:273320,name:"Преобразование информации путём рассуждений",href:"\u002Finformatika\u002Fpreobrazovanie-informatsii-putyom-rassuzhdeniy",jpg:"jpg\u002F273320"},{id:269997,name:"Теоретические основы информатики",href:"\u002Finformatika\u002Fteoreticheskie-osnovy-informatiki-17",jpg:"jpg\u002F269997"},{id:544269,name:"Презентация по теме: Внедрение и использование ИКТ в практике работы ДОУ Диск",href:"\u002Finformatika\u002Fprezentatsiya-po-teme-vnedrenie-i-ispolzovanie",jpg:"jpg\u002F544269"},{id:224307,name:"Разработка справочной системы 2GIS, в средах программирования HTMLHelpWorkshop и HTM2CHM",href:"\u002Finformatika\u002Frazrabotka-spravochnoy-sistemy-2gis-v-sredah",jpg:"jpg\u002F224307"},{id:150357,name:"Разработка программного обеспечения (Software Engineering)",href:"\u002Finformatika\u002Frazrabotka-programmnogo-obespecheniya-software-engineering-2",jpg:"jpg\u002F150357"},{id:117354,name:"Язык программирования Pascal. Процедуры и функции",href:"\u002Finformatika\u002Fyazyk-programmirovaniya-pascal-protsedury-i-funktsii",jpg:"jpg\u002F117354"},{id:91803,name:"Алгоритмдеу жєне программалау",href:"\u002Finformatika\u002Falgoritmdeu-zhne-programmalau",jpg:"jpg\u002F91803"},{id:560705,name:"Презентация к уроку Понятие информации",href:"\u002Finformatika\u002Fprezentatsiya-k-uroku-ponyatie-informatsii",jpg:"jpg\u002F560705"},{id:587325,name:"Киберпреступность",href:"\u002Finformatika\u002Fkiberprestupnost-7",jpg:"jpg\u002F587325"},{id:1321,name:"МИС в ЛПУ",href:"\u002Finformatika\u002Fmis-v-lpu",jpg:"jpg\u002F1321"},{id:2049,name:"Базы и банки данных. История развития ВТ и СУБД",href:"\u002Finformatika\u002Fbazy-i-banki-dannyh-istoriya-razvitiya",jpg:"jpg\u002F2049"},{id:243509,name:"Информационные оптимизационные модели",href:"\u002Finformatika\u002Finformatsionnye-optimizatsionnye-modeli",jpg:"jpg\u002F243509"}],navigation:{next:"\u002Fistoriya\u002Fgorod-rim",next_name:"Город Рим",prev:"\u002Fpedagogika\u002Fshveynaya-mashina-operatsii-pri-mashinnoy-obrabotke",prev_name:"Швейная машина. Операции при машинной обработке изделия (технология)"}}},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:H,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","HTML+CSS, верстка","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","mypreza@ya.ru","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","Информатика",24,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>
Теги, атрибуты. Блочные и строковые элементы
,
,Рамки для frameset
noresize, scrolling, frameborder для frame