Что такое HTML, краткая история презентация

Что такое HTML, краткая история
Тэги
Структура документа
Основные тэги
С чего начать?
Домашнее задание
Структура лекции

HTML - Hyper Text Markup Language

1986 - первая версия HTML представлена Тимоти Бернерсом-Ли для форматирования научных статей
1991 - использование HTML для передачи информации в интернет
1994 - появление W3C (World Wide Web Consortium) – Консорциум всемирной паутины
История создания

1995 - HTML2 (появление форм)
1996 - 1997 - HTML3 (появление CSS)
1997 - HTML4 (появление DOM)
2014 - … - HTML5 (browser history, canvas, svg, новые семантические тэги, data атрибуты и многое другое)
История

Тэги

Тэг - это специально зарезервированное в HTML слово
Заключено в угловые скобки -
Могут быть парные и одиночные
Могут содержать атрибуты (обязательные и опциональные)
Тэги

Большая часть тэгов - парные
Состоят из открывающего тэга
и закрывающего тэга
Могут содержать текст и другие тэги
Парные тэги (контейнеры)

Не требуют закрывающего тэга
Тэг предпочтительно заканчивать с />
Редко имеют смысл сами по себе
Содержат информацию в атрибутах
Одиночные тэги

Расширяют возможности управления тэгами
И парные и одиночные тэги могут иметь атрибуты
Тэг может содержать несколько атрибутов (указываются через запятую)
Указываются в открывающем тэге после имени тэга
Бывают универсальные и специфичные для тэга.
Атрибуты

Могут быть применены к любому тэгу
class
id
style
title
hidden
и другие
Универсальные атрибуты

class
задает принадлежность элемента тэга к группке объектов с общими свойствами
несколько объектов могут иметь один и тот же class
элемент может иметь несколько классов (указываются через пробел)
id
задает уникальный идентификатор объекта
может быть применен только к одному объекту в рамках страницы
может быть применен только один id
class и id

Строчные
Ведут себя как элементы строки
Могут содержать только текст и другие строчные элементы
Переносятся на новую строку при нехватке места
Свойства связанные с размером не применимы (width | height)
b | q | span | a | img и т.д.
Строчные и блочные элементы

Блочные
Ведут себя как блоки
Всегда начинаются с новой строки
Занимают всю доступную ширину
Применимы свойства связанные с размерами (width | height)
p | h1-h6 | ul, li | div
Строчные и блочные элементы

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

Структура документа

HTML файл - это простой текстовый документ с расширением .html
Из чего состоит:
DOCTYPE
Дерево тэгов
Текст
Структура документа

Элемент предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа).
Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу.
Запоминаем только:
DOCTYPE

Парный тэг
Заключает в себе все содержимое веб-страницы
Обычно идет после
Дополняется атрибутом lang для указания языка содержимого
Содержит ,

Парный тэг
Предназначен для хранения заголовка страницы и сервисной информации
Не отображается напрямую на странице

Содержит заголовок окна браузера
Кратко описывает содержимое страницы
Вложен в head
Может быть только один
Используется при сохранении страницы с избранное
Используется в поисковой выдаче
Не более 60 символов
<br></div><!----><!--]--><!----></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/113182/slide-21.jpg" target="_blank" rel="noopener">Слайд 22</a><h3 class="slides-content text-center font-bold"><div><p>Используется для установки сервисной информации для поисковых машин и браузеров<br>Основные атрибуты:<br>charset - устанавливает</div></h3></h3><!----><!----><div class="slides-content">кодировку документа<br>name - имя метатэга (description, keywords)<br>content - значение метатэга<br><p><meta><br></div><!----><!--]--><!----></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/113182/slide-22.jpg" target="_blank" rel="noopener">Слайд 23</a><h3 class="slides-content text-center font-bold"><div><p>предназначен для описания скриптов<br>положение не имеет значения<br>может содержать непосредственно код скрипта или ссылку</div></h3></h3><!----><!----><div class="slides-content">на файл<br>Атрибуты<br>async - загружает скрипт асинхронно<br>defer - откладывает выполнение скрипта<br>src - путь к файлу<br>type - тип содержимого (text/javascript)<br><p><script><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/113182/slide-23.jpg" target="_blank" rel="noopener">Слайд 24</a><h3 class="slides-content text-center font-bold"><div><p>определяет стили страницы<br>добавляется в секцию <head><br>может быть использован неограниченно число раз<br>Атрибуты<br>media - устройство</div></h3></h3><!----><!----><div class="slides-content">для которого будет использован (all | braille | print | screen)<br>type - тип содержимого (text/css)<br><p><style><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/113182/slide-24.jpg" target="_blank" rel="noopener">Слайд 25</a><h3 class="slides-content text-center font-bold"><div><p>Содержит весь контент документа, который отображается в браузере<br>Текст<br>Картинки<br>Скрипты<br>Имеет ряд атрибутов для оформления контента,</div></h3></h3><!----><!----><div class="slides-content">которые более не рекомендуется использовать<br><p><body><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/113182/slide-25.jpg" target="_blank" rel="noopener">Слайд 26</a><h3 class="slides-content text-center font-bold"><div><p>Основные тэги - разметка текста<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-26.jpg" target="_blank" rel="noopener">Слайд 27</a><h3 class="slides-content text-center font-bold"><div><p>Выделяют заголовки секций<br>Косвенно формируют смысловую вложенность текста<br>Используются поисковиками для определения структуры текста<br>h1 -</div></h3></h3><!----><!----><div class="slides-content">основной заголовок страницы<br>h2 - это подзаголовок h1 и весь тест под ним будет считаться относящимся к h2<br>h3 - это подзаголовок h2 и т.д. <br><p>Заголовки <h1>-<h6><br></div><!----><!--]--><!----></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/113182/slide-27.jpg" target="_blank" rel="noopener">Слайд 28</a><!----></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/113182/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p>Определяет параграф текст<br>Парный тэг<br>Блочный элемент (начинается с новой строки)<br><p><p> - параграф<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/113182/slide-29.jpg" target="_blank" rel="noopener">Слайд 30</a><h3 class="slides-content text-center font-bold"><div><p>Оба дают жирное начертание<br><b> - выделает слово без усиления значимости<br><strong> - усиливает значимость</div></h3></h3><!----><!----><div class="slides-content">выделенного слова или фразы<br><p><b>, <strong><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/113182/slide-30.jpg" target="_blank" rel="noopener">Слайд 31</a><h3 class="slides-content text-center font-bold"><div><p>Оба применяют начертание курсивом<br><i> - выделает слова отличающиеся от окружения (термины, иностранные слова,</div></h3></h3><!----><!----><div class="slides-content">прямая речь)<br><em> - выделяет слова имеющие особое значение, меняющие смысл предложения<br><p><i>, <em><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/113182/slide-31.jpg" target="_blank" rel="noopener">Слайд 32</a><h3 class="slides-content text-center font-bold"><div><p><br /> - используется для переноса строки. Не нужно использовать вместо параграфов <p>.<br><hr</div></h3></h3><!----><!----><div class="slides-content">/> - создает горизонтальную разделительную линию <br><p><br />, <hr /><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/113182/slide-32.jpg" target="_blank" rel="noopener">Слайд 33</a><h3 class="slides-content text-center font-bold"><div><p><blockquote> - длинные цитаты, может содержать абзацы, блочный<br><q> - короткие цитаты в несколько</div></h3></h3><!----><!----><div class="slides-content">слов<br><cite> - источник цитаты, автор прозведения или цитаты<br><p><blockquote>, <q>, <cite> - цитаты<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/113182/slide-33.jpg" target="_blank" rel="noopener">Слайд 34</a><h3 class="slides-content text-center font-bold"><div><p>Блочный элемент<br>Элементы списка должны быть заключены в тэг <li><br>Используется для оформления списков, когда</div></h3></h3><!----><!----><div class="slides-content">порядок элементов не важен (каталог, простое перечисление, доступные варианты)<br>Атрибуты:<br>type - устанавливает тип маркера disc | circle | square <br><p><ul> - неупорядоченный список<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/113182/slide-34.jpg" target="_blank" rel="noopener">Слайд 35</a><h3 class="slides-content text-center font-bold"><div><p>Элементы списка должны быть заключены в тэг <li><br>Используется когда порядок элементов важен для</div></h3></h3><!----><!----><div class="slides-content">восприятия смысла (рецепт, инструкция, описание алгоритма)<br>Атрибуты<br>revers - обратный порядок нумерованная<br>start - номер с которого начинается нумерование<br>type - тип нумерования A | a | I | i | 1<br><p><ol> - упорядоченный список<br></div><!----><!--]--><!----></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/113182/slide-35.jpg" target="_blank" rel="noopener">Слайд 36</a><h3 class="slides-content text-center font-bold"><div><p>По клику на ссылку происходит:<br>переход на страницу<br>скачивание файла<br>прокрутка браузера к элементу страницы<br>Атрибуты<br>href -</div></h3></h3><!----><!----><div class="slides-content">адрес документа<br>title - текст всплывающей подсказки<br>target - где открыть документ (_blank | _self)<br><p><a> - ссылка<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/113182/slide-36.jpg" target="_blank" rel="noopener">Слайд 37</a><h3 class="slides-content text-center font-bold"><div><p>Типы ссылок:<br>абсолютные - полный путь до страницы<br>относительные - относительно текущего файла / страницы<br>ссылки</div></h3></h3><!----><!----><div class="slides-content">на файл - ссылается на файл<br>якоря - ссылка на элемент текущей страницы<br><p><a> - ссылка<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/113182/slide-37.jpg" target="_blank" rel="noopener">Слайд 38</a><h3 class="slides-content text-center font-bold"><div><p>Добавляет изображение на страницу<br>Одиночный тэг<br>Может быть обернут в ссылку<br><p><img> - изображение<br><p>src - адрес</div></h3></h3><!----><!----><div class="slides-content">файла изображения<br>alt - альтернативный текст<br>width - ширина<br>height - высота<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/113182/slide-38.jpg" target="_blank" rel="noopener">Слайд 39</a><!----></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-39.jpg" target="_blank" rel="noopener">Слайд 40</a><h3 class="slides-content text-center font-bold"><div><p>Строчный элемент<br>Используется для оформление слова или фразы<br>Не имеет никакого стилевого или смыслового значения</div></h3></h3><!----><!----><div class="slides-content"><br>Если нужно изменить оформление текста без выделения значимости слова стоит использовать span вместо <b>, <i>, <q><br><p><span><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/113182/slide-40.jpg" target="_blank" rel="noopener">Слайд 41</a><h3 class="slides-content text-center font-bold"><div><p>Основные тэги - таблицы<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-41.jpg" target="_blank" rel="noopener">Слайд 42</a><h3 class="slides-content text-center font-bold"><div><p>Простейшая таблица состоит из трех элементов:<br><table> - основной тэг таблицы<br><tr> - table row</div></h3></h3><!----><!----><div class="slides-content">- строка таблицы<br><td> - table data - ячейка таблицы<br>Таблица содержит строки, а строки содержат ячейки<br><p><table> - таблицы<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/113182/slide-42.jpg" target="_blank" rel="noopener">Слайд 43</a><h3 class="slides-content text-center font-bold"><div><p>Заголовок таблицы задается тэгами:<br><tr> - table row - строка таблицы<br><th> - table header</div></h3></h3><!----><!----><div class="slides-content">- ячейка таблицы<br>По умолчанию текст выводится <br>жирным и выравнивается посередине<br><p><table> - таблицы<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/113182/slide-43.jpg" target="_blank" rel="noopener">Слайд 44</a><h3 class="slides-content text-center font-bold"><div><p>colspan - объединяет ячейки по горизонтали<br>rowspan - объединяет ячейки по вертикали<br><p><table> - объединение</div></h3></h3><!----><!----><div class="slides-content">ячеек<br></div><!----><!--]--><!----></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/113182/slide-44.jpg" target="_blank" rel="noopener">Слайд 45</a><h3 class="slides-content text-center font-bold"><div><p>Основные тэги - формы<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-45.jpg" target="_blank" rel="noopener">Слайд 46</a><h3 class="slides-content text-center font-bold"><div><p>Нужны для отправки данных пользователя со страницы на сервер.<br>Атрибуты:<br>action - URL отправки запроса<br>method</div></h3></h3><!----><!----><div class="slides-content">- метод отправки запроса <br>get - отправляет данные в строке запроса, видны в адресной строке браузера<br>post - отправляет данные в теле HTTP запроса <br><p><form> - формы<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/113182/slide-46.jpg" target="_blank" rel="noopener">Слайд 47</a><h3 class="slides-content text-center font-bold"><div><p>Задают поля для ввода информации формы<br>Основные атрибуты:<br>type - тип поля<br>value - значение поля<br>name</div></h3></h3><!----><!----><div class="slides-content">- название поля, именно с этим ключом значение будет отправлено на сервер<br>disabled - делает элемент неактивным<br>Для каждого типа могут быть заданы свои специфичные атрибуты, которые будут влиять на поведение элемента на странице<br><p><form> - поля формы - <input><br></div><!----><!--]--><!----></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/113182/slide-47.jpg" target="_blank" rel="noopener">Слайд 48</a><!----></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-48.jpg" target="_blank" rel="noopener">Слайд 49</a><h3 class="slides-content text-center font-bold"><div><p><input type=“text” /> - простое текстовое поле <br><input type=“password” /> - поле для</div></h3></h3><!----><!----><div class="slides-content">ввода пароля<br><input type=“checkbox” /> - поле типа галочка<br><input type=“radio” /> - поле выбора “один из” (объединяются в <radiogroup>)<br><input type=“file” /> - поле выбора файла<br><input type=“hidden" /> - скрытое поле<br><p>Типы input<br><p>HTML5 добавляет ряд дополнительных типов:<br>e-mail, search, url, range, tel, number, date time, color<br></div><!----><!--]--><!----></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/113182/slide-49.jpg" target="_blank" rel="noopener">Слайд 50</a><h3 class="slides-content text-center font-bold"><div><p>Типы input<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-50.jpg" target="_blank" rel="noopener">Слайд 51</a><h3 class="slides-content text-center font-bold"><div><p>Чтобы дать браузеру понять, как называется поле, недостаточно просто написать рядом текст<br>Чтобы связать</div></h3></h3><!----><!----><div class="slides-content">поле и label:<br>Поместить input внутрь тэга label<br>Либо указать атрибут for, значением будет id поля, к которому относится label<br><p><label> - подпись для поля<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/113182/slide-51.jpg" target="_blank" rel="noopener">Слайд 52</a><h3 class="slides-content text-center font-bold"><div><p>Многостраничное поле ввода, парный тэг<br>Атрибуты<br>rows - задает высоту поля в строках<br>cols - задает</div></h3></h3><!----><!----><div class="slides-content">ширину поля в символах<br>Текст по умолчанию задается содержимым тэга<br><p><textarea><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/113182/slide-52.jpg" target="_blank" rel="noopener">Слайд 53</a><h3 class="slides-content text-center font-bold"><div><p>Раскрывающийся список<br>Сам элемент задается тэгом <select><br>Каждое значение списка вложенным тэгом <option><br>Имя свойства задается</div></h3></h3><!----><!----><div class="slides-content">для select<br>Значения для option<br>По умолчанию для выбора доступен только один вариант из списка<br>Атрибут multiple устанавливает возможность множественного выбора<br><p><select><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/113182/slide-53.jpg" target="_blank" rel="noopener">Слайд 54</a><h3 class="slides-content text-center font-bold"><div><p>Задается тэгом <input> c типом submit<br>Надпись на кнопки задается атрибутом value<br>Атрибут name не</div></h3></h3><!----><!----><div class="slides-content">обязателен, но если задан, будет отправлен в запросе<br>Как альтернатива можно использовать <br><button type=“submit”>Отправить</button><br><p>Кнопка отправки формы<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/113182/slide-54.jpg" target="_blank" rel="noopener">Слайд 55</a><h3 class="slides-content text-center font-bold"><div><p>С чего начать?<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-55.jpg" target="_blank" rel="noopener">Слайд 56</a><h3 class="slides-content text-center font-bold"><div><p>Редактор должен:<br>Уметь редактировать текст<br>Быть легковесным<br>Поддерживать плагины и дополнения<br>Примеры:<br>Visual Studio Code<br>Sublime Text<br>Notepad++<br>Webstorm<br>Brackets<br>Cofeecup<br><p>Выбор редактора<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-56.jpg" target="_blank" rel="noopener">Слайд 57</a><h3 class="slides-content text-center font-bold"><div><p>Независимо от стилей заданных для элемента, переносите каждый блочный или табличный элемент на</div></h3></h3><!----><!----><div class="slides-content">новую строку<br>Ставьте отступы для всех элементов вложенных в блочный элемент<br>В качестве отступов рекомендуется использовать 2 пробела<br>Используйте id и class которые описывают назначение элемента а не его внешний вид<br>https://habr.com/ru/post/143452/<br><p>Оформление кода<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/113182/slide-57.jpg" target="_blank" rel="noopener">Слайд 58</a><h3 class="slides-content text-center font-bold"><div><p>Оформление кода<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-58.jpg" target="_blank" rel="noopener">Слайд 59</a><h3 class="slides-content text-center font-bold"><div><p>Вопросы?<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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/113182/slide-59.jpg" target="_blank" rel="noopener">Слайд 60</a><h3 class="slides-content text-center font-bold"><div><p>Домашнее задание<br></div></h3></h3><!----><!----><!----><!----><!--]--><!----></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,-краткая-история.pptx <br> Количество просмотров: 72 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/istoriya/afganskaya-voyna-1994" class="navigation-link">Афганская война</a></div><div class="navigation-item"><div>Следующая -</div><a href="/obrazovanie/biologiya-podgotovka-ekspert-ege" 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/tema-14-tehniki-testirovaniya-sistem" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/576180/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/576180/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/576180/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/576180/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/576180/slide-0.jpg 1440w" class="slides-image related-itemImage"> Тема 14. Техники тестирования систем</a></div><div class="related-item"><a href="/informatika/informatsionnye-resursy-interneta-8" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167495/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/167495/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/167495/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/167495/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/167495/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационные ресурсы интернета</a></div><div class="related-item"><a href="/informatika/vidi--tipi-saytv-tslova-auditorya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/322728/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/322728/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/322728/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/322728/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/322728/slide-0.jpg 1440w" class="slides-image related-itemImage"> Види і типи сайтів. Цільова аудиторія (урок 1)</a></div><div class="related-item"><a href="/informatika/urok-informatiki-v-5-klasse-po-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/471189/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/471189/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/471189/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/471189/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/471189/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок информатики в 5 классе по теме Обработка текстовой и графической информации.</a></div><div class="related-item"><a href="/informatika/kompleksnyy-podhod-k-zashchite-informatsii-lektsiya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/331218/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/331218/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/331218/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/331218/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/331218/slide-0.jpg 1440w" class="slides-image related-itemImage"> Комплексный подход к защите информации. (Лекция 3)</a></div><div class="related-item"><a href="/informatika/the-baseband-bane" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281688/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/281688/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/281688/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/281688/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/281688/slide-0.jpg 1440w" class="slides-image related-itemImage"> The baseband bane</a></div><div class="related-item"><a href="/informatika/shestnadtsaterichnaya-sistema-schisleniya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/279384/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/279384/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/279384/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/279384/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/279384/slide-0.jpg 1440w" class="slides-image related-itemImage"> Шестнадцатеричная система счисления</a></div><div class="related-item"><a href="/informatika/dentifkatsya-ta-metodi-viznachennya-ta-falsifkats" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/95550/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/95550/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/95550/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/95550/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/95550/slide-0.jpg 1440w" class="slides-image related-itemImage"> Ідентифікація та методи визначення та фальсифікації товарів</a></div><div class="related-item"><a href="/informatika/printsipi-pobudovi-komutatorv-ta-komutatsynih-seredovishch" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/94012/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/94012/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/94012/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/94012/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/94012/slide-0.jpg 1440w" class="slides-image related-itemImage"> Принципи побудови комутаторів та комутаційних середовищ паралельних КС. (Тема 15)</a></div><div class="related-item"><a href="/informatika/vozmozhnosti-tsifrovoy-obrazovatelnoy-sredy-v-deyatelnosti" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/168589/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/168589/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/168589/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/168589/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/168589/slide-0.jpg 1440w" class="slides-image related-itemImage"> Возможности цифровой образовательной среды в деятельности психолого-педагогической службы</a></div><div class="related-item"><a href="/informatika/logicheskie-zakony-zakon-tozhdestva" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/332565/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/332565/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/332565/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/332565/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/332565/slide-0.jpg 1440w" class="slides-image related-itemImage"> Логические законы. Закон тождества</a></div><div class="related-item"><a href="/informatika/fl-studio" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/200548/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/200548/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/200548/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/200548/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/200548/slide-0.jpg 1440w" class="slides-image related-itemImage"> FL Studio</a></div><div class="related-item"><a href="/informatika/kompyuternye-tehnologii-intellektualnoy-podderzhki-upravlencheskih-resheniy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4730/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/4730/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/4730/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/4730/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/4730/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютерные технологии интеллектуальной поддержки управленческих решений</a></div><div class="related-item"><a href="/informatika/kompyuternaya-grafika-lektsiya-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209112/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/209112/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/209112/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/209112/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209112/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютерная графика. (Лекция 1)</a></div><div class="related-item"><a href="/informatika/sistema-adresats-v-internet-protokol-tcpip" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/285503/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/285503/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/285503/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/285503/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/285503/slide-0.jpg 1440w" class="slides-image related-itemImage"> Система адресації в Internet. Протокол TCP/IP. Числові та символічні адреси DNS</a></div><div class="related-item"><a href="/informatika/intro-to-machine-learning-lecture-7" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/293509/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/293509/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/293509/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/293509/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/293509/slide-0.jpg 1440w" class="slides-image related-itemImage"> Intro to Machine Learning. Lecture 7</a></div><div class="related-item"><a href="/informatika/yazyk-html-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/107299/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/107299/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/107299/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/107299/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/107299/slide-0.jpg 1440w" class="slides-image related-itemImage"> Язык HTML</a></div><div class="related-item"><a href="/informatika/analz-vimog-tipi-dokumentv-srs-use" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/251970/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/251970/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/251970/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/251970/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/251970/slide-0.jpg 1440w" class="slides-image related-itemImage"> Аналіз вимог. Типи документів. SRS, Use case, User story</a></div><div class="related-item"><a href="/informatika/animatsiya-dobavlenie-zvukovyh-effektov-video" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/400952/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/400952/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/400952/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/400952/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/400952/slide-0.jpg 1440w" class="slides-image related-itemImage"> Анимация, добавление звуковых эффектов, видео</a></div><div class="related-item"><a href="/informatika/fotomontazh-i-kollazh-vozmozhnosti-graficheskoy-programmy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/328663/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/328663/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/328663/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/328663/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/328663/slide-0.jpg 1440w" class="slides-image related-itemImage"> Фотомонтаж и коллаж. Возможности графической программы Adobe Photoshop</a></div><div class="related-item"><a href="/informatika/upravlenie-kommunikatsiyami-proekta-14" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/323752/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/323752/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/323752/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/323752/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/323752/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление коммуникациями проекта</a></div><div class="related-item"><a href="/informatika/razrabotka-informatsionnoy-sistemy-na-baze-vysokoskorostnoy-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209191/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/209191/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/209191/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/209191/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/209191/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка информационной системы на базе высокоскоростной компьютерной сети мясоперерабатывающий завода Кампамос</a></div><div class="related-item"><a href="/informatika/vidy-ssylok-v-excel" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169172/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/169172/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/169172/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/169172/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/169172/slide-0.jpg 1440w" class="slides-image related-itemImage"> Виды ссылок в Excel</a></div><div class="related-item"><a href="/informatika/organizatsiya-razrabotki-strategii-munitsipalnogo-razvitiya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/197696/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/197696/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/197696/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/197696/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/197696/slide-0.jpg 1440w" class="slides-image related-itemImage"> Организация разработки стратегии муниципального развития</a></div><div class="related-item"><a href="/informatika/druzhestvennye-klassy-i-funktsii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116881/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/116881/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/116881/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/116881/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/116881/slide-0.jpg 1440w" class="slides-image related-itemImage"> Дружественные классы и функции</a></div><div class="related-item"><a href="/informatika/5-12-1-obrabotka-informacii" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/611733/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/611733/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/611733/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/611733/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/611733/slide-0.jpg 1440w" class="slides-image related-itemImage"> 5-12-1-obrabotka-informacii</a></div><div class="related-item"><a href="/informatika/sintaksis-programmy-operatory-kommentarii-tehnika-programmirovaniya" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/206631/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/206631/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/206631/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/206631/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/206631/slide-0.jpg 1440w" class="slides-image related-itemImage"> Синтаксис программы, операторы, комментарии, техника программирования. Основные принципы программирования</a></div><div class="related-item"><a href="/informatika/oplata-bankovskoy-kartoy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194745/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/194745/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/194745/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/194745/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/194745/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:113182,name:k,category:G,count:61,jpg:"jpg\u002F113182",hits:72,download:b,h1:"Что такое HTML, краткая история презентация",meta:{h1:k,title:k,description:"Что такое HTML, краткая история презентация на тему, доклад, Информатика",keywords:"Что такое HTML, краткая история, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Что такое HTML, краткая история из раздела Информатика. Презентация на заданную тему содержит 61 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EЧто такое HTML, краткая история\u003Cbr\u003EТэги\u003Cbr\u003EСтруктура документа\u003Cbr\u003EОсновные тэги\u003Cbr\u003EС чего начать?\u003Cbr\u003EДомашнее задание\u003Cbr\u003E\u003Cp\u003EСтруктура лекции\u003Cbr\u003E \u003Cp\u003EHTML - Hyper Text Markup Language\u003Cbr\u003E",file:"Что-такое-HTML,-краткая-история.pptx",texts:[a,"\u003Cp\u003EЧто такое HTML, краткая история\u003Cbr\u003EТэги\u003Cbr\u003EСтруктура документа\u003Cbr\u003EОсновные тэги\u003Cbr\u003EС чего начать?\u003Cbr\u003EДомашнее задание\u003Cbr\u003E\u003Cp\u003EСтруктура лекции\u003Cbr\u003E","\u003Cp\u003EHTML - Hyper Text Markup Language\u003Cbr\u003E","1986 - первая версия HTML представлена Тимоти Бернерсом-Ли для форматирования научных статей\u003Cbr\u003E1991 - использование HTML для передачи информации в интернет\u003Cbr\u003E1994 - появление W3C (World Wide Web Consortium) – Консорциум всемирной паутины \u003Cbr\u003E\u003Cp\u003EИстория создания\u003Cbr\u003E","1995 - HTML2 (появление форм)\u003Cbr\u003E1996 - 1997 - HTML3 (появление CSS)\u003Cbr\u003E1997 - HTML4 (появление DOM)\u003Cbr\u003E2014 - … - HTML5 (browser history, canvas, svg, новые семантические тэги, data атрибуты и многое другое) \u003Cbr\u003E\u003Cp\u003EИстория\u003Cbr\u003E","\u003Cp\u003EТэги\u003Cbr\u003E","Тэг - это специально зарезервированное в HTML слово\u003Cbr\u003EЗаключено в угловые скобки - \u003Ctagname\u003E\u003Cbr\u003EМогут быть парные и одиночные\u003Cbr\u003EМогут содержать атрибуты (обязательные и опциональные)\u003Cbr\u003E\u003Cp\u003EТэги\u003Cbr\u003E","Большая часть тэгов - парные\u003Cbr\u003EСостоят из открывающего тэга \u003Ctagname\u003E и закрывающего тэга \u003C\u002Ftagname\u003E\u003Cbr\u003EМогут содержать текст и другие тэги\u003Cbr\u003E\u003Cp\u003EПарные тэги (контейнеры)\u003Cbr\u003E","Не требуют закрывающего тэга\u003Cbr\u003EТэг предпочтительно заканчивать с \u002F\u003E \u003Ctagname \u002F\u003E\u003Cbr\u003EРедко имеют смысл сами по себе\u003Cbr\u003EСодержат информацию в атрибутах\u003Cbr\u003E\u003Cp\u003EОдиночные тэги\u003Cbr\u003E","\u003Cp\u003EРасширяют возможности управления тэгами\u003Cbr\u003EИ парные и одиночные тэги могут иметь атрибуты\u003Cbr\u003EТэг может содержать несколько атрибутов (указываются через запятую)\u003Cbr\u003EУказываются в открывающем тэге после имени тэга \u003Ctagname attr-name=“attr-value”\u003E\u003Cbr\u003EБывают универсальные и специфичные для тэга.\u003Cbr\u003E\u003Cp\u003EАтрибуты\u003Cbr\u003E","\u003Cp\u003EМогут быть применены к любому тэгу\u003Cbr\u003Eclass\u003Cbr\u003Eid\u003Cbr\u003Estyle\u003Cbr\u003Etitle\u003Cbr\u003Ehidden\u003Cbr\u003Eи другие\u003Cbr\u003E\u003Cp\u003EУниверсальные атрибуты\u003Cbr\u003E","\u003Cp\u003Eclass \u003Cbr\u003Eзадает принадлежность элемента тэга к группке объектов с общими свойствами\u003Cbr\u003Eнесколько объектов могут иметь один и тот же class\u003Cbr\u003Eэлемент может иметь несколько классов (указываются через пробел)\u003Cbr\u003Eid\u003Cbr\u003Eзадает уникальный идентификатор объекта\u003Cbr\u003Eможет быть применен только к одному объекту в рамках страницы\u003Cbr\u003Eможет быть применен только один id \u003Cbr\u003E\u003Cp\u003Eclass и id\u003Cbr\u003E","\u003Cp\u003EСтрочные\u003Cbr\u003EВедут себя как элементы строки\u003Cbr\u003EМогут содержать только текст и другие строчные элементы\u003Cbr\u003EПереносятся на новую строку при нехватке места\u003Cbr\u003EСвойства связанные с размером не применимы (width | height)\u003Cbr\u003Eb | q | span | a | img и т.д.\u003Cbr\u003E\u003Cp\u003EСтрочные и блочные элементы\u003Cbr\u003E","\u003Cp\u003EБлочные\u003Cbr\u003EВедут себя как блоки\u003Cbr\u003EВсегда начинаются с новой строки\u003Cbr\u003EЗанимают всю доступную ширину\u003Cbr\u003EПрименимы свойства связанные с размерами (width | height)\u003Cbr\u003Ep | h1-h6 | ul, li | div\u003Cbr\u003E\u003Cp\u003EСтрочные и блочные элементы\u003Cbr\u003E","\u003Cp\u003EЯвляется универсальным блочным элементом и предназначен для группирования элементов документа с целью изменения вида содержимого через стили.\u003Cbr\u003EМожет содержать любые тэги\u003Cbr\u003EПрименимы стили связанные с размером\u003Cbr\u003E\u003Cp\u003E\u003Cdiv\u003E\u003Cbr\u003E","\u003Cp\u003EСтруктура документа\u003Cbr\u003E","\u003Cp\u003EHTML файл - это простой текстовый документ с расширением .html\u003Cbr\u003EИз чего состоит:\u003Cbr\u003EDOCTYPE\u003Cbr\u003EДерево тэгов\u003Cbr\u003EТекст\u003Cbr\u003E\u003Cp\u003EСтруктура документа\u003Cbr\u003E","\u003Cp\u003EЭлемент \u003C!DOCTYPE\u003E предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). \u003Cbr\u003EЭто необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу.\u003Cbr\u003EЗапоминаем только:\r\n\r\n\u003C!DOCTYPE html\u003E \u003Cbr\u003E\u003Cp\u003EDOCTYPE\u003Cbr\u003E","\u003Cp\u003EПарный тэг\u003Cbr\u003EЗаключает в себе все содержимое веб-страницы\u003Cbr\u003EОбычно идет после \u003CDOCTYPE\u003E\u003Cbr\u003EДополняется атрибутом lang для указания языка содержимого\u003Cbr\u003EСодержит \u003Chead\u003E, \u003Cbody\u003E\u003Cbr\u003E\u003Cp\u003E\u003Chtml\u003E\u003Cbr\u003E","Парный тэг\u003Cbr\u003EПредназначен для хранения заголовка страницы и сервисной информации\u003Cbr\u003EНе отображается напрямую на странице\u003Cbr\u003E\u003Cp\u003E\u003Chead\u003E\u003Cbr\u003E","\u003Cp\u003EСодержит заголовок окна браузера\u003Cbr\u003EКратко описывает содержимое страницы\u003Cbr\u003EВложен в head\u003Cbr\u003EМожет быть только один\u003Cbr\u003EИспользуется при сохранении страницы с избранное\u003Cbr\u003EИспользуется в поисковой выдаче\u003Cbr\u003EНе более 60 символов\u003Cbr\u003E\u003Cp\u003E\u003Ctitle\u003E\u003Cbr\u003E","\u003Cp\u003EИспользуется для установки сервисной информации для поисковых машин и браузеров\u003Cbr\u003EОсновные атрибуты:\u003Cbr\u003Echarset - устанавливает кодировку документа\u003Cbr\u003Ename - имя метатэга (description, keywords)\u003Cbr\u003Econtent - значение метатэга\u003Cbr\u003E\u003Cp\u003E\u003Cmeta\u003E\u003Cbr\u003E","\u003Cp\u003Eпредназначен для описания скриптов\u003Cbr\u003Eположение не имеет значения\u003Cbr\u003Eможет содержать непосредственно код скрипта или ссылку на файл\u003Cbr\u003EАтрибуты\u003Cbr\u003Easync - загружает скрипт асинхронно\u003Cbr\u003Edefer - откладывает выполнение скрипта\u003Cbr\u003Esrc - путь к файлу\u003Cbr\u003Etype - тип содержимого (text\u002Fjavascript)\u003Cbr\u003E\u003Cp\u003E\u003Cscript\u003E\u003Cbr\u003E","\u003Cp\u003Eопределяет стили страницы\u003Cbr\u003Eдобавляется в секцию \u003Chead\u003E\u003Cbr\u003Eможет быть использован неограниченно число раз\u003Cbr\u003EАтрибуты\u003Cbr\u003Emedia - устройство для которого будет использован (all | braille | print | screen)\u003Cbr\u003Etype - тип содержимого (text\u002Fcss)\u003Cbr\u003E\u003Cp\u003E\u003Cstyle\u003E\u003Cbr\u003E","\u003Cp\u003EСодержит весь контент документа, который отображается в браузере\u003Cbr\u003EТекст\u003Cbr\u003EКартинки\u003Cbr\u003EСкрипты\u003Cbr\u003EИмеет ряд атрибутов для оформления контента, которые более не рекомендуется использовать\u003Cbr\u003E\u003Cp\u003E\u003Cbody\u003E\u003Cbr\u003E","\u003Cp\u003EОсновные тэги - разметка текста\u003Cbr\u003E","\u003Cp\u003EВыделяют заголовки секций\u003Cbr\u003EКосвенно формируют смысловую вложенность текста\u003Cbr\u003EИспользуются поисковиками для определения структуры текста\u003Cbr\u003Eh1 - основной заголовок страницы\u003Cbr\u003Eh2 - это подзаголовок h1 и весь тест под ним будет считаться относящимся к h2\u003Cbr\u003Eh3 - это подзаголовок h2 и т.д. \u003Cbr\u003E\u003Cp\u003EЗаголовки \u003Ch1\u003E-\u003Ch6\u003E\u003Cbr\u003E",a,"\u003Cp\u003EОпределяет параграф текст\u003Cbr\u003EПарный тэг\u003Cbr\u003EБлочный элемент (начинается с новой строки)\u003Cbr\u003E\u003Cp\u003E\u003Cp\u003E - параграф\u003Cbr\u003E","\u003Cp\u003EОба дают жирное начертание\u003Cbr\u003E\u003Cb\u003E - выделает слово без усиления значимости\u003Cbr\u003E\u003Cstrong\u003E - усиливает значимость выделенного слова или фразы\u003Cbr\u003E\u003Cp\u003E\u003Cb\u003E, \u003Cstrong\u003E\u003Cbr\u003E","\u003Cp\u003EОба применяют начертание курсивом\u003Cbr\u003E\u003Ci\u003E - выделает слова отличающиеся от окружения (термины, иностранные слова, прямая речь)\u003Cbr\u003E\u003Cem\u003E - выделяет слова имеющие особое значение, меняющие смысл предложения\u003Cbr\u003E\u003Cp\u003E\u003Ci\u003E, \u003Cem\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Cbr \u002F\u003E - используется для переноса строки. Не нужно использовать вместо параграфов \u003Cp\u003E.\u003Cbr\u003E\u003Chr \u002F\u003E - создает горизонтальную разделительную линию \u003Cbr\u003E\u003Cp\u003E\u003Cbr \u002F\u003E, \u003Chr \u002F\u003E\u003Cbr\u003E","\u003Cp\u003E\u003Cblockquote\u003E - длинные цитаты, может содержать абзацы, блочный\u003Cbr\u003E\u003Cq\u003E - короткие цитаты в несколько слов\u003Cbr\u003E\u003Ccite\u003E - источник цитаты, автор прозведения или цитаты\u003Cbr\u003E \u003Cbr\u003E\u003Cp\u003E\u003Cblockquote\u003E, \u003Cq\u003E, \u003Ccite\u003E - цитаты\u003Cbr\u003E","\u003Cp\u003EБлочный элемент\u003Cbr\u003EЭлементы списка должны быть заключены в тэг \u003Cli\u003E\u003Cbr\u003EИспользуется для оформления списков, когда порядок элементов не важен (каталог, простое перечисление, доступные варианты)\u003Cbr\u003EАтрибуты:\u003Cbr\u003Etype - устанавливает тип маркера disc | circle | square \u003Cbr\u003E\u003Cp\u003E\u003Cul\u003E - неупорядоченный список\u003Cbr\u003E","\u003Cp\u003EЭлементы списка должны быть заключены в тэг \u003Cli\u003E\u003Cbr\u003EИспользуется когда порядок элементов важен для восприятия смысла (рецепт, инструкция, описание алгоритма)\u003Cbr\u003EАтрибуты\u003Cbr\u003Erevers - обратный порядок нумерованная\u003Cbr\u003Estart - номер с которого начинается нумерование\u003Cbr\u003Etype - тип нумерования A | a | I | i | 1\u003Cbr\u003E\u003Cp\u003E\u003Col\u003E - упорядоченный список\u003Cbr\u003E","\u003Cp\u003EПо клику на ссылку происходит:\u003Cbr\u003Eпереход на страницу\u003Cbr\u003Eскачивание файла\u003Cbr\u003Eпрокрутка браузера к элементу страницы\u003Cbr\u003EАтрибуты\u003Cbr\u003Ehref - адрес документа\u003Cbr\u003Etitle - текст всплывающей подсказки\u003Cbr\u003Etarget - где открыть документ (_blank | _self)\u003Cbr\u003E\u003Cp\u003E\u003Ca\u003E - ссылка\u003Cbr\u003E","\u003Cp\u003EТипы ссылок:\u003Cbr\u003Eабсолютные - полный путь до страницы\u003Cbr\u003Eотносительные - относительно текущего файла \u002F страницы\u003Cbr\u003Eссылки на файл - ссылается на файл\u003Cbr\u003Eякоря - ссылка на элемент текущей страницы\u003Cbr\u003E\u003Cp\u003E\u003Ca\u003E - ссылка\u003Cbr\u003E","\u003Cp\u003EДобавляет изображение на страницу\u003Cbr\u003EОдиночный тэг\u003Cbr\u003EМожет быть обернут в ссылку\u003Cbr\u003E\u003Cp\u003E\u003Cimg\u003E - изображение\u003Cbr\u003E\u003Cp\u003Esrc - адрес файла изображения\u003Cbr\u003Ealt - альтернативный текст\u003Cbr\u003Ewidth - ширина\u003Cbr\u003Eheight - высота\u003Cbr\u003E",a,"\u003Cp\u003EСтрочный элемент\u003Cbr\u003EИспользуется для оформление слова или фразы\u003Cbr\u003EНе имеет никакого стилевого или смыслового значения \u003Cbr\u003EЕсли нужно изменить оформление текста без выделения значимости слова стоит использовать span вместо \u003Cb\u003E, \u003Ci\u003E, \u003Cq\u003E\u003Cbr\u003E\u003Cp\u003E\u003Cspan\u003E\u003Cbr\u003E","\u003Cp\u003EОсновные тэги - таблицы\u003Cbr\u003E","\u003Cp\u003EПростейшая таблица состоит из трех элементов:\u003Cbr\u003E\u003Ctable\u003E - основной тэг таблицы\u003Cbr\u003E\u003Ctr\u003E - table row - строка таблицы\u003Cbr\u003E\u003Ctd\u003E - table data - ячейка таблицы\u003Cbr\u003EТаблица содержит строки, а строки содержат ячейки\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E - таблицы\u003Cbr\u003E","\u003Cp\u003EЗаголовок таблицы задается тэгами:\u003Cbr\u003E\u003Ctr\u003E - table row - строка таблицы\u003Cbr\u003E\u003Cth\u003E - table header - ячейка таблицы\u003Cbr\u003EПо умолчанию текст выводится \u003Cbr\u003Eжирным и выравнивается посередине\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E - таблицы\u003Cbr\u003E","\u003Cp\u003Ecolspan - объединяет ячейки по горизонтали\u003Cbr\u003Erowspan - объединяет ячейки по вертикали\u003Cbr\u003E\u003Cp\u003E\u003Ctable\u003E - объединение ячеек\u003Cbr\u003E","\u003Cp\u003EОсновные тэги - формы\u003Cbr\u003E","\u003Cp\u003EНужны для отправки данных пользователя со страницы на сервер.\u003Cbr\u003EАтрибуты:\u003Cbr\u003Eaction - URL отправки запроса\u003Cbr\u003Emethod - метод отправки запроса \u003Cbr\u003Eget - отправляет данные в строке запроса, видны в адресной строке браузера\u003Cbr\u003Epost - отправляет данные в теле HTTP запроса \u003Cbr\u003E\u003Cp\u003E\u003Cform\u003E - формы\u003Cbr\u003E","\u003Cp\u003EЗадают поля для ввода информации формы\u003Cbr\u003EОсновные атрибуты:\u003Cbr\u003Etype - тип поля\u003Cbr\u003Evalue - значение поля\u003Cbr\u003Ename - название поля, именно с этим ключом значение будет отправлено на сервер\u003Cbr\u003Edisabled - делает элемент неактивным\u003Cbr\u003EДля каждого типа могут быть заданы свои специфичные атрибуты, которые будут влиять на поведение элемента на странице\u003Cbr\u003E\u003Cp\u003E\u003Cform\u003E - поля формы - \u003Cinput\u003E\u003Cbr\u003E",a,"\u003Cp\u003E\u003Cinput type=“text” \u002F\u003E - простое текстовое поле \u003Cbr\u003E\u003Cinput type=“password” \u002F\u003E - поле для ввода пароля\u003Cbr\u003E\u003Cinput type=“checkbox” \u002F\u003E - поле типа галочка\u003Cbr\u003E\u003Cinput type=“radio” \u002F\u003E - поле выбора “один из” (объединяются в \u003Cradiogroup\u003E)\u003Cbr\u003E\u003Cinput type=“file” \u002F\u003E - поле выбора файла\u003Cbr\u003E\u003Cinput type=“hidden\" \u002F\u003E - скрытое поле\u003Cbr\u003E\u003Cp\u003EТипы input\u003Cbr\u003E\u003Cp\u003EHTML5 добавляет ряд дополнительных типов:\u003Cbr\u003Ee-mail, search, url, range, tel, number, date time, color\u003Cbr\u003E","\u003Cp\u003EТипы input\u003Cbr\u003E","\u003Cp\u003EЧтобы дать браузеру понять, как называется поле, недостаточно просто написать рядом текст\u003Cbr\u003EЧтобы связать поле и label:\u003Cbr\u003EПоместить input внутрь тэга label\u003Cbr\u003EЛибо указать атрибут for, значением будет id поля, к которому относится label\u003Cbr\u003E\u003Cp\u003E\u003Clabel\u003E - подпись для поля\u003Cbr\u003E","\u003Cp\u003EМногостраничное поле ввода, парный тэг\u003Cbr\u003EАтрибуты\u003Cbr\u003Erows - задает высоту поля в строках\u003Cbr\u003Ecols - задает ширину поля в символах\u003Cbr\u003EТекст по умолчанию задается содержимым тэга\u003Cbr\u003E\u003Cp\u003E\u003Ctextarea\u003E\u003Cbr\u003E","\u003Cp\u003EРаскрывающийся список\u003Cbr\u003EСам элемент задается тэгом \u003Cselect\u003E\u003Cbr\u003EКаждое значение списка вложенным тэгом \u003Coption\u003E\u003Cbr\u003EИмя свойства задается для select\u003Cbr\u003EЗначения для option\u003Cbr\u003EПо умолчанию для выбора доступен только один вариант из списка\u003Cbr\u003EАтрибут multiple устанавливает возможность множественного выбора\u003Cbr\u003E\u003Cp\u003E\u003Cselect\u003E\u003Cbr\u003E","\u003Cp\u003EЗадается тэгом \u003Cinput\u003E c типом submit\u003Cbr\u003EНадпись на кнопки задается атрибутом value\u003Cbr\u003EАтрибут name не обязателен, но если задан, будет отправлен в запросе\u003Cbr\u003EКак альтернатива можно использовать \u003Cbr\u003E\u003Cbutton type=“submit”\u003EОтправить\u003C\u002Fbutton\u003E\u003Cbr\u003E\u003Cp\u003EКнопка отправки формы\u003Cbr\u003E","\u003Cp\u003EС чего начать?\u003Cbr\u003E","\u003Cp\u003EРедактор должен:\u003Cbr\u003EУметь редактировать текст\u003Cbr\u003EБыть легковесным\u003Cbr\u003EПоддерживать плагины и дополнения\u003Cbr\u003EПримеры:\u003Cbr\u003EVisual Studio Code\u003Cbr\u003ESublime Text\u003Cbr\u003ENotepad++\u003Cbr\u003EWebstorm\u003Cbr\u003EBrackets\u003Cbr\u003ECofeecup\u003Cbr\u003E\u003Cp\u003EВыбор редактора\u003Cbr\u003E","\u003Cp\u003EНезависимо от стилей заданных для элемента, переносите каждый блочный или табличный элемент на новую строку\u003Cbr\u003EСтавьте отступы для всех элементов вложенных в блочный элемент\u003Cbr\u003EВ качестве отступов рекомендуется использовать 2 пробела\u003Cbr\u003EИспользуйте id и class которые описывают назначение элемента а не его внешний вид\u003Cbr\u003Ehttps:\u002F\u002Fhabr.com\u002Fru\u002Fpost\u002F143452\u002F\u003Cbr\u003E\u003Cp\u003EОформление кода\u003Cbr\u003E","\u003Cp\u003EОформление кода\u003Cbr\u003E","\u003Cp\u003EВопросы?\u003Cbr\u003E",H,H],href:"\u002Finformatika\u002Fchto-takoe-html-kratkaya-istoriya",href_category:"\u002Finformatika",date:1627631819,related:[{id:576180,name:"Тема 14. Техники тестирования систем",href:"\u002Finformatika\u002Ftema-14-tehniki-testirovaniya-sistem",jpg:"jpg\u002F576180"},{id:167495,name:"Информационные ресурсы интернета",href:"\u002Finformatika\u002Finformatsionnye-resursy-interneta-8",jpg:"jpg\u002F167495"},{id:322728,name:"Види і типи сайтів. Цільова аудиторія (урок 1)",href:"\u002Finformatika\u002Fvidi--tipi-saytv-tslova-auditorya",jpg:"jpg\u002F322728"},{id:471189,name:"Урок информатики в 5 классе по теме Обработка текстовой и графической информации.",href:"\u002Finformatika\u002Furok-informatiki-v-5-klasse-po-2",jpg:"jpg\u002F471189"},{id:331218,name:"Комплексный подход к защите информации. (Лекция 3)",href:"\u002Finformatika\u002Fkompleksnyy-podhod-k-zashchite-informatsii-lektsiya-1",jpg:"jpg\u002F331218"},{id:281688,name:"The baseband bane",href:"\u002Finformatika\u002Fthe-baseband-bane",jpg:"jpg\u002F281688"},{id:279384,name:"Шестнадцатеричная система счисления",href:"\u002Finformatika\u002Fshestnadtsaterichnaya-sistema-schisleniya-1",jpg:"jpg\u002F279384"},{id:95550,name:"Ідентифікація та методи визначення та фальсифікації товарів",href:"\u002Finformatika\u002Fdentifkatsya-ta-metodi-viznachennya-ta-falsifkats",jpg:"jpg\u002F95550"},{id:94012,name:"Принципи побудови комутаторів та комутаційних середовищ паралельних КС. (Тема 15)",href:"\u002Finformatika\u002Fprintsipi-pobudovi-komutatorv-ta-komutatsynih-seredovishch",jpg:"jpg\u002F94012"},{id:168589,name:"Возможности цифровой образовательной среды в деятельности психолого-педагогической службы",href:"\u002Finformatika\u002Fvozmozhnosti-tsifrovoy-obrazovatelnoy-sredy-v-deyatelnosti",jpg:"jpg\u002F168589"},{id:332565,name:"Логические законы. Закон тождества",href:"\u002Finformatika\u002Flogicheskie-zakony-zakon-tozhdestva",jpg:"jpg\u002F332565"},{id:200548,name:"FL Studio",href:"\u002Finformatika\u002Ffl-studio",jpg:"jpg\u002F200548"},{id:4730,name:"Компьютерные технологии интеллектуальной поддержки управленческих решений",href:"\u002Finformatika\u002Fkompyuternye-tehnologii-intellektualnoy-podderzhki-upravlencheskih-resheniy",jpg:"jpg\u002F4730"},{id:209112,name:"Компьютерная графика. (Лекция 1)",href:"\u002Finformatika\u002Fkompyuternaya-grafika-lektsiya-1",jpg:"jpg\u002F209112"},{id:285503,name:"Система адресації в Internet. Протокол TCP\u002FIP. Числові та символічні адреси DNS",href:"\u002Finformatika\u002Fsistema-adresats-v-internet-protokol-tcpip",jpg:"jpg\u002F285503"},{id:293509,name:"Intro to Machine Learning. Lecture 7",href:"\u002Finformatika\u002Fintro-to-machine-learning-lecture-7",jpg:"jpg\u002F293509"},{id:107299,name:"Язык HTML",href:"\u002Finformatika\u002Fyazyk-html-3",jpg:"jpg\u002F107299"},{id:251970,name:"Аналіз вимог. Типи документів. SRS, Use case, User story",href:"\u002Finformatika\u002Fanalz-vimog-tipi-dokumentv-srs-use",jpg:"jpg\u002F251970"},{id:400952,name:"Анимация, добавление звуковых эффектов, видео",href:"\u002Finformatika\u002Fanimatsiya-dobavlenie-zvukovyh-effektov-video",jpg:"jpg\u002F400952"},{id:328663,name:"Фотомонтаж и коллаж. Возможности графической программы Adobe Photoshop",href:"\u002Finformatika\u002Ffotomontazh-i-kollazh-vozmozhnosti-graficheskoy-programmy",jpg:"jpg\u002F328663"},{id:323752,name:"Управление коммуникациями проекта",href:"\u002Finformatika\u002Fupravlenie-kommunikatsiyami-proekta-14",jpg:"jpg\u002F323752"},{id:209191,name:"Разработка информационной системы на базе высокоскоростной компьютерной сети мясоперерабатывающий завода Кампамос",href:"\u002Finformatika\u002Frazrabotka-informatsionnoy-sistemy-na-baze-vysokoskorostnoy-1",jpg:"jpg\u002F209191"},{id:169172,name:"Виды ссылок в Excel",href:"\u002Finformatika\u002Fvidy-ssylok-v-excel",jpg:"jpg\u002F169172"},{id:197696,name:"Организация разработки стратегии муниципального развития",href:"\u002Finformatika\u002Forganizatsiya-razrabotki-strategii-munitsipalnogo-razvitiya",jpg:"jpg\u002F197696"},{id:116881,name:"Дружественные классы и функции",href:"\u002Finformatika\u002Fdruzhestvennye-klassy-i-funktsii",jpg:"jpg\u002F116881"},{id:611733,name:"5-12-1-obrabotka-informacii",href:"\u002Finformatika\u002F5-12-1-obrabotka-informacii",jpg:"jpg\u002F611733"},{id:206631,name:"Синтаксис программы, операторы, комментарии, техника программирования. Основные принципы программирования",href:"\u002Finformatika\u002Fsintaksis-programmy-operatory-kommentarii-tehnika-programmirovaniya",jpg:"jpg\u002F206631"},{id:194745,name:"Оплата банковской картой",href:"\u002Finformatika\u002Foplata-bankovskoy-kartoy",jpg:"jpg\u002F194745"}],navigation:{next:"\u002Fobrazovanie\u002Fbiologiya-podgotovka-ekspert-ege",next_name:"Биология. Подготовка. Эксперт ЕГЭ",prev:"\u002Fistoriya\u002Fafganskaya-voyna-1994",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:24,name:"Технология",pseudoname:"tehnologiya"},{id:127,ordering:25,name:"Физика",pseudoname:"fizika"},{id:126,ordering:26,name:"Философия",pseudoname:"filosofiya"},{id:125,ordering:27,name:"Химия",pseudoname:"himiya"},{id:124,ordering:29,name:"Экология",pseudoname:"ekologiya"},{id:121,ordering:30,name:"Экономика",pseudoname:"ekonomika"},{id:120,ordering:31,name:"Юриспруденция",pseudoname:"yurisprudentsiya"}]}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:J,SITE_HOST:"mypreza.com",SITE_LANG:K,API_BASE_URL:"https:\u002F\u002Fmypreza.com\u002Fapi\u002F",pwaManifest:{name:J,short_name:a,description:a,lang:K,start_url:"\u002F?standalone=true",display:"standalone",background_color:j,theme_color:"#000000",icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.f2a6e93d.png",type:d,sizes:L,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.f2a6e93d.png",type:d,sizes:L,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.f2a6e93d.png",type:d,sizes:M,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.f2a6e93d.png",type:d,sizes:M,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.f2a6e93d.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.f2a6e93d.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.f2a6e93d.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.f2a6e93d.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.f2a6e93d.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.f2a6e93d.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.f2a6e93d.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.f2a6e93d.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.f2a6e93d.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.f2a6e93d.png",type:d,sizes:R,purpose:g}]},yandexMetrika:{id:"85004146",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:b,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:a}},pinia:{app:{meta:{h1:l,main_text:a,main_title:m,main_description:n,main_keywords:o,main_image:a},app:{logo_image:p,logo_image_width:q,logo_image_height:r,logo_text:a,image_width_full:s,image_width_min:t,recaptcha_key:u,yandex_search:v,ya_context:c,banner_1:a,banner_2:a,banner_3:a,banner_4:a,banner_5:a,banner_6:a,banner_7:a,banner_8:a,banner_9:a,banner_10:a,email:w,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:x,item_images:y,item_images_tag:z,item_words_h3:c,item_words_tag:A,item_words_1:h,routing:B,item_slide_skipping:C,item_download_timeout:D,item_slider_width:E,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:j,header_bg:i,accent:i}},social:F,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable",13,"#d53032","#ffffff","Что такое HTML, краткая история","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","[e-mail]","h3a","text","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Информатика","\u003Cp\u003EДомашнее задание\u003Cbr\u003E",1,"Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.0d6add34.js" crossorigin></script></body>
</html>