Основы веб-разработки: html5, css3 презентация

Март 2, 2023

Главная
Информатика
Основы веб-разработки: html5, css3

Содержание

2. HTML (HyperText Markup Language) Язык создания электронных документов в сети интернет Выработка спецификаций World Wide Web
3. Поддержка броузерами Практически полная поддержка: Google Chrome Firefox (Mozilla) Opera Microsoft Edge Internet Explorer 11 Частичная:
4. Структура документа HTML (01_firsthtml5.html) Текстовый файл с расширением *.html 1. - деларация типа документа (HTML5) для
5. Элементы группировки (02_group.html) Блок-контейнер Параграф Перевод строки или Форматирование Строчный элемент Не пытайтесь в строчный элемент
6. Заголовки и форматирование текста (03_header_and_format.html) Заголовки … Жирный текст и важный Курсивный текст и Зачеркнутый текст
7. Операции с изображениями (04_image.html) Элемент src - путь к файлу изображения аlt - текстовое название Элемент
8. Списки (05_lists.html) ненумерованный список (unordered list) Стиль list-style-type: disc: черный диск circle: пустой кружок square: черный
9. Навигация с помощью ссылок (06_a-link.html) Обеспечивает навигацию между отдельными документами href: определяет адрес ссылки target: определяет,
10. Таблицы (07_table.html) - общий заголовок таблицы - заголовок таблицы - тело таблицы - подвал таблицы -
11. Фреймы (08_iframe.html) позволяет встраивать на страницу другую html-страницу src - путь к загружаемому ресурсу width -
12. Элемент ввода input Атрибут type text: обычное текстовое поле password: текстовое поле cо звездочками radio: радиокнопка
13. Текстовые поля (09_inputtext-textarea.html) Однострочное value - устанавливает значение по умолчанию в текстовом поле name - для
14. Кнопки Элемент button - кнопка общего назначения reset - кнопка сброса значений формы submit - кнопка
15. Формы и отправка данных на сервер (10_forms.html) Элемент ... method - метод отправки данных на сервер
16. Элементы ввода различных параметров (11_inputnumber-other.html) Числа min - минимально допустимое значение max - максимально допустимое значение
17. Cascading Style Sheets (Каскадные таблицы стилей) Определяет форматирование на html-странице Структура объявления стиля селектор - определяет
18. Селекторы (12_css-selectors.html) Селекторами могут быть названия html-элементов (div, span, p, h3, input и т.д.) классы для
19. Наследование и каскадность Вложенные html элементы наследуют стили своих контейнеров Не наследуются: Внешние отступы (margin) Внутренние
20. Блочная модель и отступы Каждый html элемент - это блок или контейнер с различным содержимым -
21. Стили для шрифтов Семейства шрифтов font-family: Arial, Verdana, "Times New Roman"; Толщины шрифтов font-weight: 200; -
22. Цвета и фон элементов (13_background.html) Задание цвета фона - свойство background-color Значение цвета можно задать: названиями
23. Верстка с помощью Flexbox (14_flexbox.html) Включение контейнера в режим Flexbox display: flex Направление оси задается свойством
24. Домашнее задание Сделать страничку, с описанием любимого языка программирования, любимой картины, любимого места и т.д. Страница
25. Частые ошибки при верстке в ДЗ Страница не имеет структуры, хотя требования указаны – отсутсвуют блоки,
26. Спасибо за внимание
28. Скачать презентацию

Слайд 2

HTML (HyperText Markup Language)
Язык создания электронных документов в сети интернет
Выработка спецификаций

World Wide Web Consortium (W3C)
Принятие стандарта HTML5 – 2014 год
Последние спецификации: https://www.w3.org/TR/html52/ от 26.05.2023
Что нового:
Определяет новый алгоритм парсинга для создания структуры DOM
Переопределяет правила и семантику элементов ранее существовавших в HTML
Добавлен ряд новых элементов и тегов
Применение:
Язык гипертекстовой разметки
Платформа для создания Web-приложений совместно с CSS3 и JavaScript
Создание приложений для мобильных платформ под Android, iOS, Windows Mobile

Слайд 3

Поддержка броузерами
Практически полная поддержка:
Google Chrome
Firefox (Mozilla)
Opera
Microsoft Edge
Internet Explorer 11
Частичная:
Internet Explorer 8, 9
Рабочие

инструменты:
Google Chrome (F12)
Notepad++

Слайд 4

Структура документа HTML (01_firsthtml5.html)
Текстовый файл с расширением *.html
1. -

деларация типа документа (HTML5) для броузера
2. Открывающий тег
3. Заголовок
3.1. - указание кодировки
3.2. - текстовый заголовок страницы<br>3.3. <link href="external.css" rel="stylesheet"> - подключение внешних файлов стилей<br>3.4. <style type="text/css"> - блок стилей непосредственно на странице<br>4. Содержимое страницы <body><br>4.1. Основной контент в виде набора тегов html<br>4.2. <script src="/.../script.js"></script> - подключаемые внешние javascript<br>4.3. <script> alert('Hello!'); </script> - внутренние javascript <br><!DOCTYPE html><br><html lang="ru"><br> <head><br> <meta charset="utf-8"><br> <title>Первый документ HTML5

Наш первый документ HTML5

Проверка разметки: https://validator.w3.org

Слайд 5

Элементы группировки (02_group.html)

Блок-контейнер

Параграф Перевод строки
или

Форматирование


Строчный элемент 
Не

пытайтесь в строчный элемент вставить блочный!

Слайд 6

Заголовки и форматирование текста (03_header_and_format.html)
Заголовки
…

Жирный текст и важный
Курсивный

текст и
Зачеркнутый текст и
Подчеркнутый текст
Вставленный или добавленный текст
Меньший текст
Под строкой _{Над строкой ^{Выделение цветом для придания важности}}

~~Слайд 7~~

Операции с изображениями (04_image.html)
Элемент
src - путь к файлу изображения
аlt -

текстовое название

Элемент base - определяет базовый (корневой) путь

~~Слайд 8~~

Списки (05_lists.html)
ненумерованный список (unordered list)
Стиль list-style-type:
disc: черный диск
circle: пустой кружок
square:

черный квадратик
Стиль list-style-image задает картинку
нумерованный список (ordered list)
Стиль list-style-type:
decimal: десятичные числа, отсчет идет от 1
decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99
lower-roman: строчные римские цифры, например, i, ii, iii, iv, v
upper-roman: заглавные римские цифры, например, I, II, III, IV, V…
lower-alpha: строчные римские буквы, например, a, b, c..., z
upper-alpha: заглавные римские буквы, например, A, B, C, … Z
Атрибут start="n" - задает стартовый символ

~~Слайд 9~~

Навигация с помощью ссылок (06_a-link.html)
Обеспечивает навигацию между отдельными документами
href: определяет

адрес ссылки
target: определяет, как документ по ссылке должен открываться
_blank: открытие html-документа в новом окне или вкладке браузера
_self: открытие html-документа в том же фрейме (или окне)
_parent: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме
_top: открытие html-документа на все окно браузера
framename: открытие html-документа во фрейме, который называется framename (название фрейма может быть произвольным)
Компания Digital Design
Ссылка в виде картинки:

~~Слайд 10~~

Таблицы (07_table.html)

- заголовок таблицы
- тело
таблицы
- подвал таблицы
- строка таблицы
- общий заголовок таблицы
- ячейка таблицы
- ячейка заголовка или подвала
Атрибут colspan="n" - склеивает n ячеек таблицы по горизонтали
Атрибут rowspan="m" - склеивает m ячеек таблицы по вертикали
Слайд 11
Фреймы (08_iframe.html)
позволяет встраивать на страницу другую html-страницу<br>src - путь к загружаемому</div></h2><div class="slides-content">ресурсу<br>width - ширина фрейма<br>height - высота фрейма<br><iframe src="https://digdes.com" width="400" height="200">
Слайд 12
Элемент ввода input
Атрибут type
text: обычное текстовое поле
password: текстовое поле cо звездочками
radio:
радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну
checkbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии
hidden: скрытое поле
submit: кнопка отправки формы
color: поле для ввода цвета
date: поле для ввода даты
datetime: поле для ввода даты и времени с учетом часового пояса
datetime-local: поле для ввода даты и времени без учета часового пояса
email: поле для ввода адреса электронной почты
month: поле для ввода года и месяца
number: поле для ввода чисел
range: ползунок для выбора числа из некоторого диапазона
tel: поле для ввода телефона
time: поле для ввода времени
week: поле для ввода года и недели
url: поле для ввода адреса url
file: поле для выбора отправляемого файла
image: создает кнопку в виде картинки
Слайд 13
Текстовые поля (09_inputtext-textarea.html)
Однострочное
value - устанавливает значение по умолчанию
в текстовом поле
name - для идентификации поля ввода
readonly - делает текстовом поле доступным только для чтения
required - указывает, что текстовое поле обязательно должно иметь значение
pattern - определяет шаблон, которому должен соответствовать вводимый текст
placeholder - устанавливает текст приглашения
maxlength - максимально допустимое количество символов в текстовом поле
size - устанавливает ширину текстового поля в видимых символах
Многострочное <br>cols - количество столбцов <br>rows - количество строк <br></div></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 14</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-13.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Кнопки Элемент button - кнопка общего назначения reset - кнопка" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-13.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Кнопки<br><p>Элемент <button type=".."> <br>button - кнопка общего назначения<br>reset - кнопка сброса значений</div></h2><div class="slides-content">формы<br>submit - кнопка для отправки формы<br>type="submit"<br>form - форма, за которой закреплена кнопка отправки<br>formaction - устанавливает адрес, на который отправляется форма<br>formenctype - устанавливает формат отправки данных<br>formmethod - устанавливает метод отправки формы (post или get)<br>Элемент <input type=".."><br>reset - кнопка сброса значений формы<br>submit - кнопка для отправки формы<br>image - кнопка-иконка <input type="image" src="digdes.png" /> <br></div></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 15</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-14.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Формы и отправка данных на сервер (10_forms.html) Элемент ... method" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-14.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Формы и отправка данных на сервер (10_forms.html)<br><p>Элемент <form>...</form><br>method - метод отправки данных на</div></h2><div class="slides-content">сервер get или post (http)<br>action - адрес, на который передаются данные формы<br>enctype - устанавливает тип передаваемых данных<br>enctype<br>application/x-www-form-urlencoded - кодировка отправляемых данных (по умолчанию)<br>multipart/form-data: эта кодировка применяется при отправке файлов<br>text/plain: эта кодировка применяется при отправке простой текстовой информации<br></div></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 16</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-15.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Элементы ввода различных параметров (11_inputnumber-other.html) Числа min - минимально допустимое" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-15.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Элементы ввода различных параметров (11_inputnumber-other.html)<br><p>Числа <input type="number" .../><br>min - минимально допустимое значение<br>max</div></h2><div class="slides-content">- максимально допустимое значение<br>readonly - доступно только для чтения<br>required - поле обязательно должно иметь значение<br>step - шаг увеличения числа в поле<br>value - значение по умолчанию<br>Ползунок <input type="range" ... /><br>Цвет <input type="color" … /><br>Url <input type="url" …/><br>Email <input type="email" …/><br>Телефон <input type="tel" …/><br>Флажки (чек-боксы) <input type="checkbox" checked …/><br>Переключатели (радио-кнопки) <input type="radio" checked…/><br>Список <select> - <option><br></div></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 17</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-16.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Cascading Style Sheets (Каскадные таблицы стилей) Определяет форматирование на html-странице" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-16.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-16.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-16.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-16.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Cascading Style Sheets (Каскадные таблицы стилей)<br><p>Определяет форматирование на html-странице<br>Структура объявления стиля<br>селектор</div></h2><div class="slides-content">- определяет что форматировать<br>блок объявления стиля - набор команд для форматирования<br>команда - это свойство и значение<br>селектор {<br> cвойство1: значение1;<br> cвойство2: значение2;<br> ....<br>}<br>Стиль может быть определен в<br>в отдельном файле .css c подключением в заголовке html-документа: <link rel="stylesheet" type="text/css" href="styles.css"/> (низший приоритет применения при конфликте)<br>в секции <style> заголовке html-документа (средний приоритет)<br>в html- элементе через атрибут style="width: 10px; height: 10px;" (высший приоритет)<br>Валидация кода css: http://jigsaw.w3.org/css-validator/<br></div></div></div><div class="slides-wrapper"><div id="slide18" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 18</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-17.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Селекторы (12_css-selectors.html) Селекторами могут быть названия html-элементов (div, span, p," loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-17.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-17.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-17.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-17.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Селекторы (12_css-selectors.html)<br><p>Селекторами могут быть<br>названия html-элементов (div, span, p, h3, input и</div></h2><div class="slides-content">т.д.)<br>классы для элементов с определенным атрибутом class="black-square": .black-square { color: black; } - перед названием точка<br>идентификаторы для элементов с атрибутом id="square1": #square1{ color: green; } - перед названием значек #<br>универсальный селектор для всех элементов { margin: 0; }<br>групповой - перечисление через запятую div, .black-square, #square{ border: 1px red solid; }<br>объединенный - без пробела div.black-square{ width: 40px; }<br>cелектор потомков - для вложенных элементов div .black-square{ width: 40px; } с пробелом<br>cелектор дочерних - div>.black-square{ width:40px; } <br>селектор элементов одного уровня div~.black-square{ width: 40px; } - тильда <br>селектор атрибутов input[type="text"]{ border: 1px red solid;}<br></div></div></div><div class="slides-wrapper"><div id="slide19" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 19</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-18.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Наследование и каскадность Вложенные html элементы наследуют стили своих контейнеров" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-18.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-18.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-18.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-18.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Наследование и каскадность<br><p>Вложенные html элементы наследуют стили своих контейнеров<br>Не наследуются:<br>Внешние отступы</div></h2><div class="slides-content">(margin)<br>Внутренние отступы (padding)<br>Границы (border)<br>Каскадность определяет правила применения множества стилей к одному элементу<br>селекторы тегов - 1 балл<br>селекторы классов, атрибутов и псевдоклассов - 10 баллов<br>селекторы идентификаторов - 100 баллов<br>встроенные inline-стили (атрибут style) - 1000 баллов<br>отмена правил и хардлок - !important<br></div></div></div><div class="slides-wrapper"><div id="slide20" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 20</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-19.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Блочная модель и отступы Каждый html элемент - это блок" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-19.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-19.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-19.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-19.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Блочная модель и отступы<br><p>Каждый html элемент - это блок или контейнер</div></h2><div class="slides-content">с различным содержимым - текстом, изображением, таблицей и другими элементами, а также внутренними блоками <br>Внешний отступ от других элементов - свойство margin<br>margin: отступ_сверху отступ_справа отступ_снизу отступ_слева<br>margin-top, margin-right, margin-bottom, margin-left<br>Границы элемента - свойство boder<br>border-width: устанавливает ширину границы<br>border-style: задает стиль линии границы<br>border-color: устанавливает цвет границы<br>border: толщина_границы цвет_границы стиль_линии<br>Задание радиуса: <br>border-radius: верх_лев верх_прав ниж_прав ниж_лев<br>border-top-left-radius, border-top-right-radius, <br>border-bottom-right-radius, border-bottom-left-radius <br>Внутренний отступ к внутреннему содерж - свойство padding (аналогично margin)<br></div></div></div><div class="slides-wrapper"><div id="slide21" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 21</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-20.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Стили для шрифтов Семейства шрифтов font-family: Arial, Verdana, "Times New" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-20.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-20.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-20.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-20.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Стили для шрифтов<br><p>Семейства шрифтов<br>font-family: Arial, Verdana, "Times New Roman";<br>Толщины шрифтов<br>font-weight: 200; -</div></h2><div class="slides-content">100, 200, 300, … , 900 <br>Курсив/наклон<br>font-style: italic-курсив / normal-простой / oblique-простой с наклоном <br>Цвет - свойство color<br>Высота или размер - свойство font-size<br>В пикселях px<br>В процентах относительно базового или унаследованного шрифта %<br>В единицах em (по умолчанию, 1em = 16px)<br>В строковых константах:<br>medium: базовый размер шрифта браузера (16 пикселей)<br>small: 13 пикселей<br>x-small: 10 пикселей<br>xx-small: 9 пикселей<br>large: 18 пикселей<br>x-large: 24 пикселя<br>xx-large: 32 пикселя<br></div></div></div><div class="slides-wrapper"><div id="slide22" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 22</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-21.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Цвета и фон элементов (13_background.html) Задание цвета фона - свойство" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-21.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-21.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-21.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-21.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Цвета и фон элементов (13_background.html)<br><p>Задание цвета фона - свойство background-color<br>Значение цвета</div></h2><div class="slides-content">можно задать:<br>названиями (black, white, green, red и т.д.)<br>шестнадцатиричным значением: #rrggbb, например: #1C25FF<br>десятичными значениями RGB 0-255, например: rgb(112, 34, 99)<br>процентными значениями RGB 0%-100%, например: rgb(20%,30%,40%)<br>c дополнительным компонентом прозрачности RGBА 0-1, например: rgba(21,34,45, .7)<br>Прозрачность - свойство opacity от 0-1<br>Задание фона в виде изображения - свойство background-image<br>С абсолютным путем background-image: url(http://somesite/picture.png)<br>С относительным путем background-image: url(../images/picture.png)<br></div></div></div><div class="slides-wrapper"><div id="slide23" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 23</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-22.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Верстка с помощью Flexbox (14_flexbox.html) Включение контейнера в режим Flexbox" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/580800/slide-22.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-22.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-22.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-22.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Верстка с помощью Flexbox (14_flexbox.html)<br><p>Включение контейнера в режим Flexbox <br>display: flex<br>Направление</div></h2><div class="slides-content">оси задается свойством flex-direction<br>row - элементы располагаются в виде строки слева <br>направо (по умолчанию)<br>сolum - элементы располагаются в столбик сверху вниз<br>Выравнивание элементов: justify-content<br>flex-start – по умолчанию (по левому краю)<br>flex-end<br>center<br>space-between<br>space-around<br>Выравнивание по поперчной оси: align-items<br>stretch – по умолчанию (растягивание по высоте)<br>flex-start<br>flex-end<br>center<br>baseline<br></div></div></div><div class="slides-wrapper"><div id="slide24" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 24</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-23.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/580800/slide-23.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-23.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-23.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-23.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Домашнее задание<br><p>Сделать страничку, с описанием любимого языка программирования, любимой картины, любимого</div></h2><div class="slides-content">места и т.д.<br>Страница должна иметь:<br>Заголовок<br>Центральную часть из двух и более колонок<br>Картинка (элемент <img />)<br>Описание<br>Полезные ссылки (элемент <a />)<br>Форма опроса с отправкой на фейковый адрес (чекбоксы, радиокнопки, выбор из списка и другие контролы)<br>Футер со своим копирайтом :)<br>Необходимо использовать фон, отступы, выравнивание<br>Можно использовать любые режимы верстки:<br>Flexbox верстку(см. 14_flexbox.html)<br>Табличную верстку<br>Блочную верстку<br>Используйте любые материалы из текущего курса и инета <br></div></div></div><div class="slides-wrapper"><div id="slide25" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 25</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-24.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/580800/slide-24.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-24.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-24.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-24.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Частые ошибки при верстке в ДЗ<br><p>Страница не имеет структуры, хотя требования</div></h2><div class="slides-content">указаны – отсутсвуют блоки, блочные столбцы и т.д.<br>При изменении разрешения или переключении в режим смартфона страница “ломается” – блоки налезают друг на друга, текст выходит за рамки и т.д.<br>Отсутствуют контролы<br>Отсутствуют отступы, фон, рамки, выравнивание блоков и контролов<br>Валидируйте ваш код! html на https://validator.w3.org/ и css на https://jigsaw.w3.org/css-validator/<br>Код html/css должен быть четко отформатирован!<br>Желательно не использовать дополнительные фреймворки типа bootstrap или material-ui<br></div></div></div><div class="slides-wrapper"><div id="slide26" class="slides-item"><div class="text-center"><span class="slides-headingUnit">Слайд 26</span></div><h2 class="mb-0"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-25.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/580800/slide-25.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/580800/slide-25.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/580800/slide-25.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/580800/slide-25.jpg 1440w" class="slides-image"></h2><h2 class="slides-content text-center font-bold"><div><p>Спасибо за внимание<br></div></h2></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"> Имя файла: Основы-веб-разработки:-html5,-css3.pptx <br> Количество просмотров: 25 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/ekonomika/dengi-i-ih-rol-v-sovremennoy" class="navigation-link">Деньги и их роль в современной экономике России</a></div><div class="navigation-item"><div>Следующая -</div><a href="/informatika/formy-php" class="navigation-link">Формы php</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/elementy-teorii-algoritmov" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4161/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/4161/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/4161/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/4161/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4161/slide-0.jpg 1440w" class="slides-image related-itemImage"> Элементы теории алгоритмов</a></div><div class="related-item"><a href="/informatika/ict-practical-work-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/321519/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/321519/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/321519/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/321519/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/321519/slide-0.jpg 1440w" class="slides-image related-itemImage"> ICT practical work 2</a></div><div class="related-item"><a href="/informatika/urok-po-informatike-dlya-10-klassa" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/517341/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/517341/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/517341/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/517341/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/517341/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок по информатике для 10 класса по теме Что такое система? Информационные процессы.</a></div><div class="related-item"><a href="/informatika/sozdanie-struktury-bazy-dannyh-po-spetsialnosti-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/597845/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/597845/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/597845/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/597845/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/597845/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание структуры базы данных по специальности</a></div><div class="related-item"><a href="/informatika/podgotovkakogepoinformatike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/399932/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/399932/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/399932/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/399932/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/399932/slide-0.jpg 1440w" class="slides-image related-itemImage"> Podgotovka_k_OGE_po_informatike</a></div><div class="related-item"><a href="/informatika/programmirovanie-razvetvlyayushchihsya-algoritmov-nachala-programmirovaniya-informatika-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582840/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/582840/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/582840/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/582840/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/582840/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программирование разветвляющихся алгоритмов. Начала программирования. Информатика. 8 класс</a></div><div class="related-item"><a href="/informatika/ugrozy-bezopasnosti-kompyuternyh-sistem-i-informatsionno" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/264897/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/264897/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/264897/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/264897/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/264897/slide-0.jpg 1440w" class="slides-image related-itemImage"> Угрозы безопасности компьютерных систем и информационно-коммуникационных технологий (Лекция№3)</a></div><div class="related-item"><a href="/informatika/feysbuk" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/103214/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/103214/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/103214/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/103214/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/103214/slide-0.jpg 1440w" class="slides-image related-itemImage"> Фейсбук</a></div><div class="related-item"><a href="/informatika/informatsionnaya-kartina-miratema-1-chast-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368353/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/368353/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/368353/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/368353/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368353/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационная картина мира.Тема 1 (часть 1)</a></div><div class="related-item"><a href="/informatika/fayl-i-faylovaya-sistema-reshenie-zadach" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/187972/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/187972/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/187972/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/187972/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/187972/slide-0.jpg 1440w" class="slides-image related-itemImage"> Файл и файловая система. Решение задач</a></div><div class="related-item"><a href="/informatika/1skassa--oblachnyy-servis-dlya-malogo" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/222005/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/222005/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/222005/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/222005/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/222005/slide-0.jpg 1440w" class="slides-image related-itemImage"> 1С:Касса – облачный сервис для малого бизнеса</a></div><div class="related-item"><a href="/informatika/viola-slidescarnival" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/396588/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/396588/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/396588/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/396588/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/396588/slide-0.jpg 1440w" class="slides-image related-itemImage"> Viola SlidesCarnival</a></div><div class="related-item"><a href="/informatika/parametrizatsiya-tipov-v-java" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/151391/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/151391/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/151391/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/151391/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/151391/slide-0.jpg 1440w" class="slides-image related-itemImage"> Параметризация типов в Java</a></div><div class="related-item"><a href="/informatika/excel-2009" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/449521/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/449521/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/449521/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/449521/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/449521/slide-0.jpg 1440w" class="slides-image related-itemImage"> Excel</a></div><div class="related-item"><a href="/informatika/obrabotka-tekstovoy-i-graficheskoy-informatsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/310830/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/310830/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/310830/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/310830/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/310830/slide-0.jpg 1440w" class="slides-image related-itemImage"> Обработка текстовой и графической информации</a></div><div class="related-item"><a href="/informatika/integratsiya-informatsionnyh-tehnologiy-v-obuchenie-matematike" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/183686/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/183686/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/183686/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/183686/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/183686/slide-0.jpg 1440w" class="slides-image related-itemImage"> Интеграция информационных технологий в обучение математике учащихся 5-х классов общеобразовательной школы</a></div><div class="related-item"><a href="/informatika/programmirovanie-lineynyh-algoritmov-nachala-programmirovaniya-10" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/179573/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/179573/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/179573/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/179573/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/179573/slide-0.jpg 1440w" class="slides-image related-itemImage"> Программирование линейных алгоритмов начала программирования</a></div><div class="related-item"><a href="/informatika/rezultaty-issledovaniy-metodom-kontent-analiza-postanovka" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/443269/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/443269/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/443269/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/443269/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/443269/slide-0.jpg 1440w" class="slides-image related-itemImage"> Результаты исследований методом контент-анализа (постановка задачи)</a></div><div class="related-item"><a href="/informatika/onlayn-navchannya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/3746/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/3746/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/3746/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/3746/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/3746/slide-0.jpg 1440w" class="slides-image related-itemImage"> Онлайн-навчання</a></div><div class="related-item"><a href="/informatika/multimedia-v-zhurnalistike-a-nuzhno-li" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/357925/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/357925/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/357925/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/357925/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/357925/slide-0.jpg 1440w" class="slides-image related-itemImage"> Мультимедиа в журналистике. А нужно ли? И как?</a></div><div class="related-item"><a href="/informatika/sistemi-upravlnnya-bazami-danih-osnovi-pobudovi" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/15367/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/15367/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/15367/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/15367/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/15367/slide-0.jpg 1440w" class="slides-image related-itemImage"> Системи управління базами даних: основи побудови та моделі організації</a></div><div class="related-item"><a href="/informatika/urok-informatiki-po-temesostavlenie-i-ispolnenie" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/564405/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/564405/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/564405/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/564405/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/564405/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок информатики по темеСоставление и исполнение алгоритмов. 2 класс. 3 четверть. ( по программе Бененсон Е.П.)</a></div><div class="related-item"><a href="/informatika/graficheskie-vozmozhnosti-lazarus" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281402/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/281402/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/281402/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/281402/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281402/slide-0.jpg 1440w" class="slides-image related-itemImage"> Графические возможности Lazarus</a></div><div class="related-item"><a href="/informatika/arhtektura-rozroblennya-ta-ekspluatatsya-nformatsynih-sistem" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595188/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/595188/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/595188/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/595188/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/595188/slide-0.jpg 1440w" class="slides-image related-itemImage"> Архітектура, розроблення та експлуатація інформаційних систем корпоративного і національного рівнів</a></div><div class="related-item"><a href="/informatika/nastroyki-telefona-yazyk" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/95502/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/95502/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/95502/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/95502/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/95502/slide-0.jpg 1440w" class="slides-image related-itemImage"> Настройки телефона: язык</a></div><div class="related-item"><a href="/informatika/shtuchniy-ntelekt" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4024/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/4024/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/4024/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/4024/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4024/slide-0.jpg 1440w" class="slides-image related-itemImage"> Штучний інтелект</a></div><div class="related-item"><a href="/informatika/virusy-i-antivirusnaya-zashchita" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/391360/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/391360/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/391360/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/391360/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/391360/slide-0.jpg 1440w" class="slides-image related-itemImage"> Вирусы и антивирусная защита</a></div><div class="related-item"><a href="/informatika/razrabotka-interaktivnogo-sayta-uchebnogo-klassa" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190643/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/190643/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/190643/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/190643/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/190643/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,S){return {data:{meta:{result:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F}},item:{result:{id:580800,name:m,category:G,count:H,jpg:"jpg\u002F580800",hits:I,download:b,h1:"Основы веб-разработки: html5, css3 презентация",meta:{h1:m,title:m,description:"Основы веб-разработки: html5, css3 презентация на тему, доклад, Информатика",keywords:"Основы веб-разработки: html5, css3, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Основы веб-разработки: html5, css3 из раздела Информатика. Презентация на заданную тему содержит 27 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:a,file:"Основы-веб-разработки:-html5,-css3.pptx",texts:["\u003Cp\u003EПостников Илья\u003Cbr\u003E\u003Cp\u003EШкола инженера\r\nОсновы веб-разработки: html5, css3\u003Cbr\u003E","\u003Cp\u003EHTML (HyperText Markup Language)\u003Cbr\u003EЯзык создания электронных документов в сети интернет\u003Cbr\u003EВыработка спецификаций World Wide Web Consortium (W3C)\u003Cbr\u003EПринятие стандарта HTML5 – 2014 год\u003Cbr\u003EПоследние спецификации: https:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml52\u002F от 26.05.2023\u003Cbr\u003EЧто нового:\u003Cbr\u003EОпределяет новый алгоритм парсинга для создания структуры DOM\u003Cbr\u003EПереопределяет правила и семантику элементов ранее существовавших в HTML\u003Cbr\u003EДобавлен ряд новых элементов и тегов\u003Cbr\u003EПрименение:\u003Cbr\u003EЯзык гипертекстовой разметки\u003Cbr\u003EПлатформа для создания Web-приложений совместно с CSS3 и JavaScript\u003Cbr\u003EСоздание приложений для мобильных платформ под Android, iOS, Windows Mobile\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПоддержка броузерами\u003Cbr\u003E\u003Cp\u003EПрактически полная поддержка:\u003Cbr\u003EGoogle Chrome\u003Cbr\u003EFirefox (Mozilla)\u003Cbr\u003EOpera\u003Cbr\u003EMicrosoft Edge\u003Cbr\u003EInternet Explorer 11\u003Cbr\u003EЧастичная:\u003Cbr\u003EInternet Explorer 8, 9\u003Cbr\u003EРабочие инструменты:\u003Cbr\u003EGoogle Chrome (F12)\u003Cbr\u003ENotepad++\u003Cbr\u003E","\u003Cp\u003EСтруктура документа HTML (01_firsthtml5.html)\u003Cbr\u003E\u003Cp\u003EТекстовый файл с расширением .html\u003Cbr\u003E1. \u003C!DOCTYPE html\u003E - деларация типа документа (HTML5) для броузера\u003Cbr\u003E2. \u003Clink href=\"external.css\" rel=\"stylesheet\"\u003EОткрывающий тег \u003Chtml\u003E\u003Cbr\u003E3. Заголовок \u003Chead\u003E\u003Cbr\u003E3.1. \u003Cmeta charset=\"utf-8\"\u003E - указание кодировки\u003Cbr\u003E3.2. \u003Ctitle\u003E - текстовый заголовок страницы\u003Cbr\u003E3.3. \u003Clink href=\"external.css\" rel=\"stylesheet\"\u003E - подключение внешних файлов стилей\u003Cbr\u003E3.4. \u003Cstyle type=\"text\u002Fcss\"\u003E - блок стилей непосредственно на странице\u003Cbr\u003E4. Содержимое страницы \u003Cbody\u003E\u003Cbr\u003E4.1. Основной контент в виде набора тегов html\u003Cbr\u003E4.2. \u003Cscript src=\"\u002F...\u002Fscript.js\"\u003E\u003C\u002Fscript\u003E - подключаемые внешние javascript\u003Cbr\u003E4.3. \u003Cscript\u003E alert('Hello!'); \u003C\u002Fscript\u003E - внутренние javascript \u003Cbr\u003E\u003C!DOCTYPE html\u003E\u003Cbr\u003E\u003Chtml lang=\"ru\"\u003E\u003Cbr\u003E \u003Chead\u003E\u003Cbr\u003E \u003Cmeta charset=\"utf-8\"\u003E\u003Cbr\u003E \u003Ctitle\u003EПервый документ HTML5\u003C\u002Ftitle\u003E\u003Cbr\u003E \u003C\u002Fhead\u003E\u003Cbr\u003E \u003Cbody\u003E\u003Cbr\u003E \u003Cdiv\u003EНаш первый документ HTML5\u003C\u002Fdiv\u003E\u003Cbr\u003E \u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003EПроверка разметки: https:\u002F\u002Fvalidator.w3.org\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы группировки (02_group.html)\u003Cbr\u003E\u003Cp\u003EБлок-контейнер \u003Cdiv\u003E\u003Cbr\u003EПараграф Перевод строки \u003Cbr\u003E или \u003Cbr\u002F\u003E\u003Cbr\u003EФорматирование \u003Cpre\u003E\u003Cbr\u003EСтрочный элемент \u003Cspan\u003E\u003Cbr\u003EНе пытайтесь в строчный элемент вставить блочный!\u003Cbr\u003E","\u003Cp\u003EЗаголовки и форматирование текста (03_header_and_format.html)\u003Cbr\u003E\u003Cp\u003EЗаголовки \u003Ch1\u003E…\u003Ch6\u003E\u003Cbr\u003EЖирный текст \u003Cb\u003E и важный \u003Cstrong\u003E\u003Cbr\u003EКурсивный текст \u003Ci\u003E и \u003Cem\u003E\u003Cbr\u003EЗачеркнутый текст \u003Cdel\u003E и \u003Cs\u003E\u003Cbr\u003EПодчеркнутый текст \u003Cu\u003E\u003Cbr\u003EВставленный или добавленный текст \u003Cins\u003E\u003Cbr\u003EМеньший текст \u003Csmall\u003E\u003Cbr\u003EПод строкой \u003Csub\u003E\u003Cbr\u003EНад строкой \u003Csup\u003E\u003Cbr\u003EВыделение цветом для придания важности \u003Cmark\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EОперации с изображениями (04_image.html)\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cimg\u003E\u003Cbr\u003Esrc - путь к файлу изображения \u003Cbr\u003Eаlt - текстовое название\u003Cbr\u003E\u003Cimg src=\"monaliza.jpg\" alt=\"Картина 'Мона Лиза'\"\u002F\u003E\u003Cbr\u003EЭлемент base - определяет базовый (корневой) путь\u003Cbr\u003E","\u003Cp\u003EСписки (05_lists.html)\u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E ненумерованный список (unordered list)\u003Cbr\u003EСтиль list-style-type:\u003Cbr\u003Edisc: черный диск\u003Cbr\u003Ecircle: пустой кружок\u003Cbr\u003Esquare: черный квадратик\u003Cbr\u003EСтиль list-style-image задает картинку\u003Cbr\u003E\u003Col\u003E нумерованный список (ordered list)\u003Cbr\u003EСтиль list-style-type:\u003Cbr\u003E decimal: десятичные числа, отсчет идет от 1\u003Cbr\u003E decimal-leading-zero: десятичные числа, которые предваряются нулем, например, 01, 02, 03, … 98, 99\u003Cbr\u003E lower-roman: строчные римские цифры, например, i, ii, iii, iv, v\u003Cbr\u003E upper-roman: заглавные римские цифры, например, I, II, III, IV, V…\u003Cbr\u003E lower-alpha: строчные римские буквы, например, a, b, c..., z\u003Cbr\u003E upper-alpha: заглавные римские буквы, например, A, B, C, … Z\u003Cbr\u003EАтрибут start=\"n\" - задает стартовый символ\u003Cbr\u003E","\u003Cp\u003EНавигация с помощью ссылок (06_a-link.html)\u003Cbr\u003E\u003Cp\u003E\u003Ca\u003E Обеспечивает навигацию между отдельными документами\u003Cbr\u003Ehref: определяет адрес ссылки\u003Cbr\u003Etarget: определяет, как документ по ссылке должен открываться\u003Cbr\u003E_blank: открытие html-документа в новом окне или вкладке браузера\u003Cbr\u003E_self: открытие html-документа в том же фрейме (или окне)\u003Cbr\u003E_parent: открытие документа в родительском фрейме, если ссылка расположена во внутреннем фрейме\u003Cbr\u003E_top: открытие html-документа на все окно браузера\u003Cbr\u003Eframename: открытие html-документа во фрейме, который называется framename (название фрейма может быть произвольным)\u003Cbr\u003E\u003Ca href=\"https:\u002F\u002Fwww.digdes.ru\u002F\" target=\"_blank\"\u003EКомпания Digital Design\u003C\u002Fa\u003E\u003Cbr\u003EСсылка в виде картинки:\u003Cbr\u003E\u003Ca href=\"https:\u002F\u002Fwww.digdes.ru\u002F\"\u003E\u003Cimg src=\"06-logo-dd.png\" alt=\"Логотип Digital Design\"\u002F\u003E\u003C\u002Fa\u003E\u003Cbr\u003E","\u003Cp\u003EТаблицы (07_table.html)\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E\u003Cbr\u003E\u003Ccaption\u003E - общий заголовок таблицы\u003Cbr\u003E\u003Cthead\u003E - заголовок таблицы\u003Cbr\u003E\u003Ctbody\u003E - тело таблицы\u003Cbr\u003E\u003Ctfoot\u003E - подвал таблицы\u003Cbr\u003E\u003Ctr\u003E - строка таблицы\u003Cbr\u003E\u003Ctd\u003E - ячейка таблицы\u003Cbr\u003E\u003Cth\u003E - ячейка заголовка или подвала\u003Cbr\u003EАтрибут colspan=\"n\" - склеивает n ячеек таблицы по горизонтали\u003Cbr\u003EАтрибут rowspan=\"m\" - склеивает m ячеек таблицы по вертикали\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EФреймы (08_iframe.html)\u003Cbr\u003E\u003Cp\u003E\u003Ciframe\u003E позволяет встраивать на страницу другую html-страницу\u003Cbr\u003Esrc - путь к загружаемому ресурсу\u003Cbr\u003Ewidth - ширина фрейма\u003Cbr\u003Eheight - высота фрейма\u003Cbr\u003E\u003Ciframe src=\"https:\u002F\u002Fdigdes.com\" width=\"400\" height=\"200\"\u003E\u003C\u002Fiframe\u003E\u003Cbr\u003E","\u003Cp\u003EЭлемент ввода input\u003Cbr\u003E\u003Cp\u003EАтрибут type\u003Cbr\u003Etext: обычное текстовое поле\u003Cbr\u003Epassword: текстовое поле cо звездочками\u003Cbr\u003Eradio: радиокнопка или переключатель. Из группы радиокнопок можно выбрать только одну\u003Cbr\u003Echeckbox: элемент флажок, который может находиться в отмеченном или неотмеченном состоянии\u003Cbr\u003Ehidden: скрытое поле\u003Cbr\u003Esubmit: кнопка отправки формы\u003Cbr\u003Ecolor: поле для ввода цвета\u003Cbr\u003Edate: поле для ввода даты\u003Cbr\u003Edatetime: поле для ввода даты и времени с учетом часового пояса\u003Cbr\u003Edatetime-local: поле для ввода даты и времени без учета часового пояса\u003Cbr\u003Eemail: поле для ввода адреса электронной почты\u003Cbr\u003Emonth: поле для ввода года и месяца\u003Cbr\u003Enumber: поле для ввода чисел\u003Cbr\u003Erange: ползунок для выбора числа из некоторого диапазона\u003Cbr\u003Etel: поле для ввода телефона\u003Cbr\u003Etime: поле для ввода времени\u003Cbr\u003Eweek: поле для ввода года и недели\u003Cbr\u003Eurl: поле для ввода адреса url\u003Cbr\u003Efile: поле для выбора отправляемого файла\u003Cbr\u003Eimage: создает кнопку в виде картинки\u003Cbr\u003E","\u003Cp\u003EТекстовые поля (09_inputtext-textarea.html)\u003Cbr\u003E\u003Cp\u003EОднострочное \u003Cinput type=\"text\" \u002F\u003E\u003Cbr\u003Evalue - устанавливает значение по умолчанию в текстовом поле\u003Cbr\u003Ename - для идентификации поля ввода\u003Cbr\u003Ereadonly - делает текстовом поле доступным только для чтения\u003Cbr\u003Erequired - указывает, что текстовое поле обязательно должно иметь значение\u003Cbr\u003Epattern - определяет шаблон, которому должен соответствовать вводимый текст\u003Cbr\u003Eplaceholder - устанавливает текст приглашения\u003Cbr\u003Emaxlength - максимально допустимое количество символов в текстовом поле\u003Cbr\u003Esize - устанавливает ширину текстового поля в видимых символах\u003Cbr\u003EМногострочное \u003Ctextarea \u002F\u003E\u003Cbr\u003Ecols - количество столбцов \u003Cbr\u003Erows - количество строк\r\n\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EКнопки\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cbutton type=\"..\"\u003E \u003Cbr\u003Ebutton - кнопка общего назначения\u003Cbr\u003Ereset - кнопка сброса значений формы\u003Cbr\u003Esubmit - кнопка для отправки формы\u003Cbr\u003Etype=\"submit\"\u003Cbr\u003Eform - форма, за которой закреплена кнопка отправки\u003Cbr\u003Eformaction - устанавливает адрес, на который отправляется форма\u003Cbr\u003Eformenctype - устанавливает формат отправки данных\u003Cbr\u003Eformmethod - устанавливает метод отправки формы (post или get)\u003Cbr\u003EЭлемент \u003Cinput type=\"..\"\u003E\u003Cbr\u003Ereset - кнопка сброса значений формы\u003Cbr\u003Esubmit - кнопка для отправки формы\u003Cbr\u003Eimage - кнопка-иконка \u003Cinput type=\"image\" src=\"digdes.png\" \u002F\u003E \u003Cbr\u003E","\u003Cp\u003EФормы и отправка данных на сервер (10_forms.html)\u003Cbr\u003E\u003Cp\u003EЭлемент \u003Cform\u003E...\u003C\u002Fform\u003E\u003Cbr\u003Emethod - метод отправки данных на сервер get или post (http)\u003Cbr\u003Eaction - адрес, на который передаются данные формы\u003Cbr\u003Eenctype - устанавливает тип передаваемых данных\u003Cbr\u003Eenctype\u003Cbr\u003Eapplication\u002Fx-www-form-urlencoded - кодировка отправляемых данных (по умолчанию)\u003Cbr\u003Emultipart\u002Fform-data: эта кодировка применяется при отправке файлов\u003Cbr\u003Etext\u002Fplain: эта кодировка применяется при отправке простой текстовой информации\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EЭлементы ввода различных параметров (11_inputnumber-other.html)\u003Cbr\u003E\u003Cp\u003EЧисла \u003Cinput type=\"number\" ...\u002F\u003E\u003Cbr\u003Emin - минимально допустимое значение\u003Cbr\u003Emax - максимально допустимое значение\u003Cbr\u003Ereadonly - доступно только для чтения\u003Cbr\u003Erequired - поле обязательно должно иметь значение\u003Cbr\u003Estep - шаг увеличения числа в поле\u003Cbr\u003Evalue - значение по умолчанию\u003Cbr\u003EПолзунок \u003Cinput type=\"range\" ... \u002F\u003E\u003Cbr\u003EЦвет \u003Cinput type=\"color\" … \u002F\u003E\u003Cbr\u003EUrl \u003Cinput type=\"url\" …\u002F\u003E\u003Cbr\u003EEmail \u003Cinput type=\"email\" …\u002F\u003E\u003Cbr\u003EТелефон \u003Cinput type=\"tel\" …\u002F\u003E\u003Cbr\u003EФлажки (чек-боксы) \u003Cinput type=\"checkbox\" checked …\u002F\u003E\u003Cbr\u003EПереключатели (радио-кнопки) \u003Cinput type=\"radio\" checked…\u002F\u003E\u003Cbr\u003EСписок \u003Cselect\u003E - \u003Coption\u003E\u003Cbr\u003E","\u003Cp\u003ECascading Style Sheets (Каскадные таблицы стилей)\u003Cbr\u003E\u003Cp\u003EОпределяет форматирование на html-странице\u003Cbr\u003EСтруктура объявления стиля\u003Cbr\u003Eселектор - определяет что форматировать\u003Cbr\u003Eблок объявления стиля - набор команд для форматирования\u003Cbr\u003Eкоманда - это свойство и значение\u003Cbr\u003Eселектор {\u003Cbr\u003E cвойство1: значение1;\u003Cbr\u003E cвойство2: значение2;\u003Cbr\u003E ....\u003Cbr\u003E}\u003Cbr\u003EСтиль может быть определен в\u003Cbr\u003Eв отдельном файле .css c подключением в заголовке html-документа: \u003Clink rel=\"stylesheet\" type=\"text\u002Fcss\" href=\"styles.css\"\u002F\u003E (низший приоритет применения при конфликте)\u003Cbr\u003Eв секции \u003Cstyle\u003E заголовке html-документа (средний приоритет)\u003Cbr\u003Eв html- элементе через атрибут style=\"width: 10px; height: 10px;\" (высший приоритет)\u003Cbr\u003EВалидация кода css: http:\u002F\u002Fjigsaw.w3.org\u002Fcss-validator\u002F\u003Cbr\u003E","\u003Cp\u003EСелекторы (12_css-selectors.html)\u003Cbr\u003E\u003Cp\u003EСелекторами могут быть\u003Cbr\u003Eназвания html-элементов (div, span, p, h3, input и т.д.)\u003Cbr\u003Eклассы для элементов с определенным атрибутом class=\"black-square\": .black-square { color: black; } - перед названием точка\u003Cbr\u003Eидентификаторы для элементов с атрибутом id=\"square1\": #square1{ color: green; } - перед названием значек #\u003Cbr\u003Eуниверсальный селектор для всех элементов *{ margin: 0; }\u003Cbr\u003Eгрупповой - перечисление через запятую div, .black-square, #square{ border: 1px red solid; }\u003Cbr\u003Eобъединенный - без пробела div.black-square{ width: 40px; }\u003Cbr\u003Ecелектор потомков - для вложенных элементов div .black-square{ width: 40px; } с пробелом\u003Cbr\u003Ecелектор дочерних - div\u003E.black-square{ width:40px; } \u003Cbr\u003Eселектор элементов одного уровня div~.black-square{ width: 40px; } - тильда \u003Cbr\u003Eселектор атрибутов input[type=\"text\"]{ border: 1px red solid;}\u003Cbr\u003E","\u003Cp\u003EНаследование и каскадность\u003Cbr\u003E\u003Cp\u003EВложенные html элементы наследуют стили своих контейнеров\u003Cbr\u003EНе наследуются:\u003Cbr\u003EВнешние отступы (margin)\u003Cbr\u003EВнутренние отступы (padding)\u003Cbr\u003EГраницы (border)\u003Cbr\u003EКаскадность определяет правила применения множества стилей к одному элементу\u003Cbr\u003Eселекторы тегов - 1 балл\u003Cbr\u003Eселекторы классов, атрибутов и псевдоклассов - 10 баллов\u003Cbr\u003Eселекторы идентификаторов - 100 баллов\u003Cbr\u003Eвстроенные inline-стили (атрибут style) - 1000 баллов\u003Cbr\u003Eотмена правил и хардлок - !important\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EБлочная модель и отступы\u003Cbr\u003E\u003Cp\u003EКаждый html элемент - это блок или контейнер с различным содержимым - текстом, изображением, таблицей и другими элементами, а также внутренними блоками \u003Cbr\u003EВнешний отступ от других элементов - свойство margin\u003Cbr\u003Emargin: отступ_сверху отступ_справа отступ_снизу отступ_слева\u003Cbr\u003Emargin-top, margin-right, margin-bottom, margin-left\u003Cbr\u003EГраницы элемента - свойство boder\u003Cbr\u003Eborder-width: устанавливает ширину границы\u003Cbr\u003Eborder-style: задает стиль линии границы\u003Cbr\u003Eborder-color: устанавливает цвет границы\u003Cbr\u003Eborder: толщина_границы цвет_границы стиль_линии\u003Cbr\u003EЗадание радиуса: \u003Cbr\u003Eborder-radius: верх_лев верх_прав ниж_прав ниж_лев\u003Cbr\u003Eborder-top-left-radius, border-top-right-radius, \u003Cbr\u003Eborder-bottom-right-radius, border-bottom-left-radius \u003Cbr\u003EВнутренний отступ к внутреннему содерж - свойство padding (аналогично margin)\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСтили для шрифтов\u003Cbr\u003E\u003Cp\u003EСемейства шрифтов\u003Cbr\u003Efont-family: Arial, Verdana, \"Times New Roman\";\u003Cbr\u003EТолщины шрифтов\u003Cbr\u003Efont-weight: 200; - 100, 200, 300, … , 900 \u003Cbr\u003EКурсив\u002Fнаклон\u003Cbr\u003Efont-style: italic-курсив \u002F normal-простой \u002F oblique-простой с наклоном \u003Cbr\u003EЦвет - свойство color\u003Cbr\u003EВысота или размер - свойство font-size\u003Cbr\u003EВ пикселях px\u003Cbr\u003EВ процентах относительно базового или унаследованного шрифта %\u003Cbr\u003EВ единицах em (по умолчанию, 1em = 16px)\u003Cbr\u003EВ строковых константах:\u003Cbr\u003Emedium: базовый размер шрифта браузера (16 пикселей)\u003Cbr\u003Esmall: 13 пикселей\u003Cbr\u003Ex-small: 10 пикселей\u003Cbr\u003Exx-small: 9 пикселей\u003Cbr\u003Elarge: 18 пикселей\u003Cbr\u003Ex-large: 24 пикселя\u003Cbr\u003Exx-large: 32 пикселя\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EЦвета и фон элементов (13_background.html)\u003Cbr\u003E\u003Cp\u003EЗадание цвета фона - свойство background-color\u003Cbr\u003EЗначение цвета можно задать:\u003Cbr\u003Eназваниями (black, white, green, red и т.д.)\u003Cbr\u003Eшестнадцатиричным значением: #rrggbb, например: #1C25FF\u003Cbr\u003Eдесятичными значениями RGB 0-255, например: rgb(112, 34, 99)\u003Cbr\u003Eпроцентными значениями RGB 0%-100%, например: rgb(20%,30%,40%)\u003Cbr\u003Ec дополнительным компонентом прозрачности RGBА 0-1, например: rgba(21,34,45, .7)\u003Cbr\u003EПрозрачность - свойство opacity от 0-1\u003Cbr\u003EЗадание фона в виде изображения - свойство background-image\u003Cbr\u003EС абсолютным путем background-image: url(http:\u002F\u002Fsomesite\u002Fpicture.png)\u003Cbr\u003EС относительным путем background-image: url(..\u002Fimages\u002Fpicture.png)\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EВерстка с помощью Flexbox (14_flexbox.html)\u003Cbr\u003E\u003Cp\u003EВключение контейнера в режим Flexbox \u003Cbr\u003Edisplay: flex\u003Cbr\u003EНаправление оси задается свойством flex-direction\u003Cbr\u003Erow - элементы располагаются в виде строки слева \u003Cbr\u003Eнаправо (по умолчанию)\u003Cbr\u003Eсolum - элементы располагаются в столбик сверху вниз\u003Cbr\u003EВыравнивание элементов: justify-content\u003Cbr\u003Eflex-start – по умолчанию (по левому краю)\u003Cbr\u003Eflex-end\u003Cbr\u003Ecenter\u003Cbr\u003Espace-between\u003Cbr\u003Espace-around\u003Cbr\u003EВыравнивание по поперчной оси: align-items\u003Cbr\u003Estretch – по умолчанию (растягивание по высоте)\u003Cbr\u003Eflex-start\u003Cbr\u003Eflex-end\u003Cbr\u003Ecenter\u003Cbr\u003Ebaseline\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EДомашнее задание\u003Cbr\u003E\u003Cp\u003EСделать страничку, с описанием любимого языка программирования, любимой картины, любимого места и т.д.\u003Cbr\u003EСтраница должна иметь:\u003Cbr\u003EЗаголовок\u003Cbr\u003EЦентральную часть из двух и более колонок\u003Cbr\u003EКартинка (элемент \u003Cimg \u002F\u003E)\u003Cbr\u003EОписание\u003Cbr\u003EПолезные ссылки (элемент \u003Ca \u002F\u003E)\u003Cbr\u003EФорма опроса с отправкой на фейковый адрес (чекбоксы, радиокнопки, выбор из списка и другие контролы)\u003Cbr\u003EФутер со своим копирайтом :)\u003Cbr\u003EНеобходимо использовать фон, отступы, выравнивание\u003Cbr\u003EМожно использовать любые режимы верстки:\u003Cbr\u003EFlexbox верстку(см. 14_flexbox.html)\u003Cbr\u003EТабличную верстку\u003Cbr\u003EБлочную верстку\u003Cbr\u003EИспользуйте любые материалы из текущего курса и инета \u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EЧастые ошибки при верстке в ДЗ\u003Cbr\u003E\u003Cp\u003EСтраница не имеет структуры, хотя требования указаны – отсутсвуют блоки, блочные столбцы и т.д.\u003Cbr\u003EПри изменении разрешения или переключении в режим смартфона страница “ломается” – блоки налезают друг на друга, текст выходит за рамки и т.д.\u003Cbr\u003EОтсутствуют контролы\u003Cbr\u003EОтсутствуют отступы, фон, рамки, выравнивание блоков и контролов\u003Cbr\u003EВалидируйте ваш код! html на https:\u002F\u002Fvalidator.w3.org\u002F и css на https:\u002F\u002Fjigsaw.w3.org\u002Fcss-validator\u002F\u003Cbr\u003EКод html\u002Fcss должен быть четко отформатирован!\u003Cbr\u003EЖелательно не использовать дополнительные фреймворки типа bootstrap или material-ui\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСпасибо за внимание\u003Cbr\u003E","\u003Cp\u003EКонтакты\u003Cbr\u003E\u003Cp\u003Ewww.digdes.ru\u003Cbr\u003Einfo@digdes.com\u003Cbr\u003EСанкт-Петербург\u003Cbr\u003Eнаб. реки Смоленки, д. 33\r\nтелефон: +7 812 346 58 33\u003Cbr\u003EМосква\u003Cbr\u003EВаршавское шоссе, д. 36, стр. 8\u003Cbr\u003Eтелефон: +7 499 788 74 94\u003Cbr\u003E"],href:"\u002Finformatika\u002Fosnovy-veb-razrabotki-html5-css3",href_category:"\u002Finformatika",date:1677742633,related:[{id:4161,name:"Элементы теории алгоритмов",href:"\u002Finformatika\u002Felementy-teorii-algoritmov",jpg:"jpg\u002F4161"},{id:321519,name:"ICT practical work 2",href:"\u002Finformatika\u002Fict-practical-work-2",jpg:"jpg\u002F321519"},{id:517341,name:"Урок по информатике для 10 класса по теме Что такое система? Информационные процессы.",href:"\u002Finformatika\u002Furok-po-informatike-dlya-10-klassa",jpg:"jpg\u002F517341"},{id:597845,name:"Создание структуры базы данных по специальности",href:"\u002Finformatika\u002Fsozdanie-struktury-bazy-dannyh-po-spetsialnosti-1",jpg:"jpg\u002F597845"},{id:399932,name:"Podgotovka_k_OGE_po_informatike",href:"\u002Finformatika\u002Fpodgotovkakogepoinformatike",jpg:"jpg\u002F399932"},{id:582840,name:"Программирование разветвляющихся алгоритмов. Начала программирования. Информатика. 8 класс",href:"\u002Finformatika\u002Fprogrammirovanie-razvetvlyayushchihsya-algoritmov-nachala-programmirovaniya-informatika-3",jpg:"jpg\u002F582840"},{id:264897,name:"Угрозы безопасности компьютерных систем и информационно-коммуникационных технологий (Лекция№3)",href:"\u002Finformatika\u002Fugrozy-bezopasnosti-kompyuternyh-sistem-i-informatsionno",jpg:"jpg\u002F264897"},{id:103214,name:"Фейсбук",href:"\u002Finformatika\u002Ffeysbuk",jpg:"jpg\u002F103214"},{id:368353,name:"Информационная картина мира.Тема 1 (часть 1)",href:"\u002Finformatika\u002Finformatsionnaya-kartina-miratema-1-chast-1",jpg:"jpg\u002F368353"},{id:187972,name:"Файл и файловая система. Решение задач",href:"\u002Finformatika\u002Ffayl-i-faylovaya-sistema-reshenie-zadach",jpg:"jpg\u002F187972"},{id:222005,name:"1С:Касса – облачный сервис для малого бизнеса",href:"\u002Finformatika\u002F1skassa--oblachnyy-servis-dlya-malogo",jpg:"jpg\u002F222005"},{id:396588,name:"Viola SlidesCarnival",href:"\u002Finformatika\u002Fviola-slidescarnival",jpg:"jpg\u002F396588"},{id:151391,name:"Параметризация типов в Java",href:"\u002Finformatika\u002Fparametrizatsiya-tipov-v-java",jpg:"jpg\u002F151391"},{id:449521,name:"Excel",href:"\u002Finformatika\u002Fexcel-2009",jpg:"jpg\u002F449521"},{id:310830,name:"Обработка текстовой и графической информации",href:"\u002Finformatika\u002Fobrabotka-tekstovoy-i-graficheskoy-informatsii",jpg:"jpg\u002F310830"},{id:183686,name:"Интеграция информационных технологий в обучение математике учащихся 5-х классов общеобразовательной школы",href:"\u002Finformatika\u002Fintegratsiya-informatsionnyh-tehnologiy-v-obuchenie-matematike",jpg:"jpg\u002F183686"},{id:179573,name:"Программирование линейных алгоритмов начала программирования",href:"\u002Finformatika\u002Fprogrammirovanie-lineynyh-algoritmov-nachala-programmirovaniya-10",jpg:"jpg\u002F179573"},{id:443269,name:"Результаты исследований методом контент-анализа (постановка задачи)",href:"\u002Finformatika\u002Frezultaty-issledovaniy-metodom-kontent-analiza-postanovka",jpg:"jpg\u002F443269"},{id:3746,name:"Онлайн-навчання",href:"\u002Finformatika\u002Fonlayn-navchannya",jpg:"jpg\u002F3746"},{id:357925,name:"Мультимедиа в журналистике. А нужно ли? И как?",href:"\u002Finformatika\u002Fmultimedia-v-zhurnalistike-a-nuzhno-li",jpg:"jpg\u002F357925"},{id:15367,name:"Системи управління базами даних: основи побудови та моделі організації",href:"\u002Finformatika\u002Fsistemi-upravlnnya-bazami-danih-osnovi-pobudovi",jpg:"jpg\u002F15367"},{id:564405,name:"Урок информатики по темеСоставление и исполнение алгоритмов. 2 класс. 3 четверть. ( по программе Бененсон Е.П.)",href:"\u002Finformatika\u002Furok-informatiki-po-temesostavlenie-i-ispolnenie",jpg:"jpg\u002F564405"},{id:281402,name:"Графические возможности Lazarus",href:"\u002Finformatika\u002Fgraficheskie-vozmozhnosti-lazarus",jpg:"jpg\u002F281402"},{id:595188,name:"Архітектура, розроблення та експлуатація інформаційних систем корпоративного і національного рівнів",href:"\u002Finformatika\u002Farhtektura-rozroblennya-ta-ekspluatatsya-nformatsynih-sistem",jpg:"jpg\u002F595188"},{id:95502,name:"Настройки телефона: язык",href:"\u002Finformatika\u002Fnastroyki-telefona-yazyk",jpg:"jpg\u002F95502"},{id:4024,name:"Штучний інтелект",href:"\u002Finformatika\u002Fshtuchniy-ntelekt",jpg:"jpg\u002F4024"},{id:391360,name:"Вирусы и антивирусная защита",href:"\u002Finformatika\u002Fvirusy-i-antivirusnaya-zashchita",jpg:"jpg\u002F391360"},{id:190643,name:"Разработка интерактивного сайта учебного класса",href:"\u002Finformatika\u002Frazrabotka-interaktivnogo-sayta-uchebnogo-klassa",jpg:"jpg\u002F190643"}],navigation:{next:"\u002Finformatika\u002Fformy-php",next_name:"Формы php",prev:"\u002Fekonomika\u002Fdengi-i-ih-rol-v-sovremennoy",prev_name:"Деньги и их роль в современной экономике России"}}},categories:{result:[{id:J,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:J,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:j,name:"Литература",pseudoname:"literatura"},{id:119,ordering:k,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:13,name:"Медицина",pseudoname:"medetsina"},{id:118,ordering:14,name:"Менеджмент",pseudoname:"menedzhment"},{id:137,ordering:15,name:"Музыка",pseudoname:"muzyka"},{id:136,ordering:16,name:"МХК",pseudoname:"mhk"},{id:130,ordering:17,name:"Немецкий язык",pseudoname:"nemetskiy-yazyk"},{id:105,ordering:18,name:"ОБЖ",pseudoname:"obzh"},{id:133,ordering:19,name:"Обществознание ",pseudoname:"obshchestvoznanie"},{id:132,ordering:20,name:"Окружающий мир ",pseudoname:"okruzhayushchiy-mir"},{id:131,ordering:21,name:"Педагогика ",pseudoname:"pedagogika"},{id:129,ordering:22,name:"Русский язык",pseudoname:"russkiy-yazyk"},{id:128,ordering:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:I,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:H,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:d,config:{public:{SITE_NAME:K,SITE_HOST:"mypreza.com",SITE_LANG:L,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:K,short_name:a,description:a,lang:L,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:c,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:c,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:c,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:c,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:c,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:c,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:c,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:c,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:c,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:c,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:c,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:c,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:c,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:c,sizes:S,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:d,childIframe:e,clickmap:e,defer:e,useRuntimeConfig:d,trackHash:e,trackLinks:d,type:b,webvisor:e,triggerEvent:e,consoleLog:d,partytown:e,isDev:e}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:n,main_text:a,main_title:o,main_description:p,main_keywords:q,main_image:a},app:{logo_image:r,logo_image_width:s,logo_image_height:t,logo_text:a,image_width_full:u,image_width_min:v,recaptcha_key:w,yandex_search:x,ya_context:e,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:y,footer_before:a,footer:a,dark_theme:e,strategy:{image_alt_words:j,item_slide_header:z,item_images:A,item_images_tag:h,item_words_h3:d,item_words_tag:h,item_words_1:k,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:d,item_show_contents:d,item_show_filename:d},colors:{header_text:l,header_bg:i,accent:i}},social:F,token:a}}}}("",0,"image\u002Fpng",true,false,"any","maskable","h2","#d53032",10,11,"#ffffff","Основы веб-разработки: html5, css3","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","mypreza@ya.ru","div","images_before","category","both",88,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","Информатика",27,25,1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body> </html>

Основы веб-разработки: html5, css3 презентация

Содержание

HTML (HyperText Markup Language)Язык создания электронных документов в сети интернетВыработка спецификаций

Поддержка броузерамиПрактически полная поддержка:Google ChromeFirefox (Mozilla)OperaMicrosoft EdgeInternet Explorer 11Частичная:Internet Explorer 8, 9Рабочие

Структура документа HTML (01_firsthtml5.html)Текстовый файл с расширением *.html1. -

Элементы группировки (02_group.html)Блок-контейнер Параграф Перевод строки или Форматирование Строчный элемент Не

Заголовки и форматирование текста (03_header_and_format.html)Заголовки …Жирный текст и важный Курсивный

…

Жирный текст и важный Курсивный

Операции с изображениями (04_image.html)Элемент src - путь к файлу изображения аlt -

Списки (05_lists.html) ненумерованный список (unordered list)Стиль list-style-type:disc: черный дискcircle: пустой кружокsquare:

Навигация с помощью ссылок (06_a-link.html) Обеспечивает навигацию между отдельными документамиhref: определяет

Элемент ввода inputАтрибут typetext: обычное текстовое полеpassword: текстовое поле cо звездочкамиradio:

Текстовые поля (09_inputtext-textarea.html)Однострочное value - устанавливает значение по умолчанию

HTML (HyperText Markup Language)
Язык создания электронных документов в сети интернет
Выработка спецификаций

Поддержка броузерами
Практически полная поддержка:
Google Chrome
Firefox (Mozilla)
Opera
Microsoft Edge
Internet Explorer 11
Частичная:
Internet Explorer 8, 9
Рабочие

Структура документа HTML (01_firsthtml5.html)
Текстовый файл с расширением *.html
1. -

Элементы группировки (02_group.html)
Блок-контейнер

Параграф Перевод строки
или

Форматирование

Строчный элемент
Не

Заголовки и форматирование текста (03_header_and_format.html)
Заголовки
…

Жирный текст и важный
Курсивный

Жирный текст и важный
Курсивный

Операции с изображениями (04_image.html)
Элемент
src - путь к файлу изображения
аlt -

Списки (05_lists.html)
ненумерованный список (unordered list)
Стиль list-style-type:
disc: черный диск
circle: пустой кружок
square:

Навигация с помощью ссылок (06_a-link.html)
Обеспечивает навигацию между отдельными документами
href: определяет

Элемент ввода input
Атрибут type
text: обычное текстовое поле
password: текстовое поле cо звездочками
radio:

Текстовые поля (09_inputtext-textarea.html)
Однострочное
value - устанавливает значение по умолчанию