Верстка web-страниц. Введение презентация

Содержание

Слайд 2

Содержание

Основные понятия
Инструментарий
История
Сведения о HTML и CSS
HTML документ и его структура

Содержание Основные понятия Инструментарий История Сведения о HTML и CSS HTML документ и его структура

Слайд 3

Основные понятия

Веб-страница - документ или информационный ресурс Всемирной паутины, доступ к

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

Слайд 4

Основные понятия

Сервер - программное обеспечение, принимающее запросы от клиентов.
Клиент – в

Основные понятия Сервер - программное обеспечение, принимающее запросы от клиентов. Клиент – в нашем случае браузер.
нашем случае браузер.

Слайд 5

Основные понятия

HTTP - (англ. HyperText Transfer Protocol — «протокол передачи гипертекста»)

Основные понятия HTTP - (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») —
— протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов). Основой HTTP является технология «клиент-сервер».

Слайд 6

Основные понятия

Сайт - (от англ. website: web — «паутина, сеть» и

Основные понятия Сайт - (от англ. website: web — «паутина, сеть» и site
site — «место», буквально «место, сегмент, часть в сети») — совокупность электронных документов (файлов) частного лица или организации в Сети.

Слайд 7

Структура сайта

Логическая –
информационное структурирование (что, где, в каком объеме будет размещено,

Структура сайта Логическая – информационное структурирование (что, где, в каком объеме будет размещено,
каким образом будет выглядеть система навигации, доступ к каким объектам и каким образом будет организован и т.п.)
Физическая –
техническая реализация спроектированной информационной структуры:
формирование файловой системы для сайта;
определение стартовой страницы;
подключаемые СУБД и БД;
и т.п.

Слайд 8

Основные понятия

URL - (англ. URL — Uniform Resource Locator) — единообразный

Основные понятия URL - (англ. URL — Uniform Resource Locator) — единообразный локатор
локатор (определитель местонахождения) ресурса. Ранее назывался Universal Resource Locator — универсальный указатель ресурса. URL — это стандартизированный способ записи адреса ресурса в сети Интернет.
Или просто ссылка ☺

Слайд 9

Основные понятия

HTML - (HyperText Markup Language) — язык гипертекстовой разметки.
Документ

Основные понятия HTML - (HyperText Markup Language) — язык гипертекстовой разметки. Документ HTML
HTML представляет в своей основе текстовый документ, в котором имеются специальные символы – теги, определяющие структуру документа и позволяющие осуществлять связь между несколькими подобными документами.
Именно из-за возможности размещать в документе ссылки на другие документы и с их помощью осуществлять переходы данный язык называется гипертекстовым.

Слайд 10

Основные понятия

HTML – структурирует документ, упорядочивая информацию в структурные единицы –

Основные понятия HTML – структурирует документ, упорядочивая информацию в структурные единицы – заголовки,
заголовки, абзацы, списки и другие элементы.
CSS – взаимодействуя с браузером, придает документу определенный стилевой формат – цвет, размер, отступы и другие оформительские свойства.
Пример,
Объект – фраза из нескольких слов
HTML – тип объекта (абзац или заголовок), последовательность при размещении в общем контенте.
CSS – тип шрифта, размер шрифта, цвет начертания, наличие обрамления текста рамкой, отступ от рядом расположенных объектов.

Слайд 11

Основные понятия

Преимущества CSS:
больше возможностей форматирования;
применение одного свойства к произвольному количеству однотипных

Основные понятия Преимущества CSS: больше возможностей форматирования; применение одного свойства к произвольному количеству
объектов;
описание свойств с использованием стилей значительно уменьшает суммарный объем разрабатываемого ресурса;
упрощается процесс обновления ресурса при внесении стилевых изменений.

Слайд 12

Инструментарий

Для начальной разработки веб-страниц или даже небольшого сайта (набор страниц, связанных между собой

Инструментарий Для начальной разработки веб-страниц или даже небольшого сайта (набор страниц, связанных между
ссылками и единым оформлением), нам понадобятся следующие программы:
Текстовый редактор.
Браузер(ы) для просмотра результатов.
Валидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде (для CSS также).
Графический редактор.
Справочная литература.
Это необходимый минимум

Слайд 13

История HTML

SGML – предок HTML. В свое время был разработан для

История HTML SGML – предок HTML. В свое время был разработан для для
для совместного использования машинно-читаемого текста в больших правительственных программах (например, аэрокосмических).
HTML – разработан в конце 1980-х годов. Создавался для обмена научной и технической информацией между университетами, давая возможность работать с ним без серьезной профессиональной подготовки.

Слайд 14

История HTML

HTML 2.0 – одобрен как стандарт в 1995
От версии к

История HTML HTML 2.0 – одобрен как стандарт в 1995 От версии к
версии, до текущего HTML 5 добавлялись дополнительные возможности представления информации на веб-странице.
XHTML 1.0 – оформлен как стандарт в 2000 году. Смесь XML + HTML 4, сделанная ради стандартизации разработки веб-страниц. Идею признали несостоятельной, и почти приняв XHTML 2.0, разговоры о продолжении стандарта прекратились. Вместо этого силы были брошены на разработку HTML 5.

Слайд 15

Развитие HTML

Основные причины развития HTML:
Развитие мультимедиа-возможностей ПК
Появление карманных компьютеров и смартфонов,

Развитие HTML Основные причины развития HTML: Развитие мультимедиа-возможностей ПК Появление карманных компьютеров и
планшетов
Необходимость стандартизации
Упрощение разработки
За всем этим следит Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), который был создан в 1994 году.

Слайд 16

Стандарт сегодня

Стандарт веб-разработки сегодня:
HTML 4.1 (HTML 5 уже практикуется), CSS 2.1

Стандарт сегодня Стандарт веб-разработки сегодня: HTML 4.1 (HTML 5 уже практикуется), CSS 2.1 (CSS 3.0)
(CSS 3.0)

Слайд 17

Теги HTML

Главным элементом разметки является тег.
Он не отображается непосредственно в

Теги HTML Главным элементом разметки является тег. Он не отображается непосредственно в браузере,
браузере, но влияет на то, каким образом отображаются остальные элементы – текст, ссылки, изображения и другой контент.
<тег атрибут1="значение" атрибут2="значение">
<тег атрибут1="значение" атрибут2="значение">...

Слайд 18

Теги HTML

<тег> - парный тег (контейнер)
<тег /> - непарный тег
Примеры:
Заголовок страницы
Внутри

Теги HTML - парный тег (контейнер) - непарный тег Примеры: Заголовок страницы Внутри
этого тега все символы выделены жирным
- откуда и какую картинку необходимо взять браузеру для отображения на странице

Слайд 19

Теги HTML

Парный тег (контейнер)
Парные теги, называемые по-другому контейнеры, состоят из двух

Теги HTML Парный тег (контейнер) Парные теги, называемые по-другому контейнеры, состоят из двух
частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — <тег>, а в закрывающем используется слэш — . Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок.

Слайд 20

Теги HTML

Если связать открывающий и закрывающий тег между собой скобкой, как

Теги HTML Если связать открывающий и закрывающий тег между собой скобкой, как показано
показано на рис., то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой. Любое пересечение условных скобок говорит о том, что правильная последовательность тегов нарушена.

Слайд 21

Теги HTML

Теги:
Обрамляются <>.
В теге могут находиться атрибуты (дополнительные параметры для элементов).

Теги HTML Теги: Обрамляются . В теге могут находиться атрибуты (дополнительные параметры для
Атрибуты могут быть практически у любого тега.
Содержимое тега пишется между открывающим и закрывающим тегами. Если тег непарный, то содержимое пишется в атрибуте.
Теги могут следовать линейно, а могут располагаться вложенно (на подобие вложенных скобок).

Слайд 23

Теги HTML

Для тегов любого типа действуют определенные правила их использования.
Причем,

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

Слайд 24

Теги HTML

Атрибуты тегов и кавычки
Согласно спецификации HTML все значения атрибутов тегов

Теги HTML Атрибуты тегов и кавычки Согласно спецификации HTML все значения атрибутов тегов
следует указывать в двойных ("пример") или одинарных кавычках ('пример').
Отсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы.

Слайд 25

Теги HTML

Теги можно писать как прописными, так и строчными символами
Любые теги,

Теги HTML Теги можно писать как прописными, так и строчными символами Любые теги,
а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — 
,
 или 
. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта.

Слайд 26

Теги HTML

Переносы строк
Внутри тега между его атрибутами допустимо ставить перенос строк.

Теги HTML Переносы строк Внутри тега между его атрибутами допустимо ставить перенос строк.
Однако, при этом следует учитывать «читабельность» и визуальное восприятие кода – лучше, когда код воспринимается в той логической структуре, в которой он создавался.

Слайд 27

Теги HTML

Неизвестные теги и атрибуты
Если какой-либо тег или его атрибут был

Теги HTML Неизвестные теги и атрибуты Если какой-либо тег или его атрибут был
написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было.
Опять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.

Слайд 28

Теги HTML

Порядок тегов
Существует определенная иерархия вложенности тегов. Например, тег  должен находиться внутри</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-27.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/106717/slide-27.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-27.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-27.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-27.jpg 1440w" class="slides-image"><!----><div class="slides-content">контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.<br>Если теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги <title> и <meta>, на конечном результате это никак не скажется.<br></div><!----><!--]--><!----></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/106717/slide-28.jpg" target="_blank" rel="noopener">Слайд 29</a><h3 class="slides-content text-center font-bold"><div><p>Структура документа<br><p><!DOCTYPE HTML> - обозначение типа документа для браузера // в</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-28.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/106717/slide-28.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-28.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-28.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-28.jpg 1440w" class="slides-image"><!----><div class="slides-content">данном случае определение типа документа для HTML5 самое простое<br><html> - начало документа<br><head> - служебная часть документа<br> <title>Заголовок страницы

- содержательная часть документа

- конец документа

Слайд 30

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

"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
- таким образом

Структура документа "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> - таким образом выглядит обозначение типа
выглядит обозначение типа документа для стандартной страницы на HTML4.01

Слайд 31

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




Заголовок страницы




Структура документа Заголовок страницы

Слайд 32

Служебная информация

Тег с заголовком страницы<br>Теги <meta /> - в основном</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-31.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/106717/slide-31.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-31.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-31.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-31.jpg 1440w" class="slides-image"><!----><div class="slides-content">используются для браузеров и поисковых систем<br>Теги <link /> - подключение CSS<br>Теги <script> - подключение JS<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/106717/slide-32.jpg" target="_blank" rel="noopener">Слайд 33</a><h3 class="slides-content text-center font-bold"><div><p>Работа с документом<br><p>Создавать и редактировать файлы можно в любом текстовом редакторе</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-32.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/106717/slide-32.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-32.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-32.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-32.jpg 1440w" class="slides-image"><!----><div class="slides-content">(к примеру, NotePad++)<br>Шаблон имени файла: *.html – ваш компьютер поймет, что этот файл нужно открывать в браузере<br>В имени файла только латинские буквы, и цифры, подчеркивания(_) и дефисы (-).<br>Русские буквы, пробелы и спец.символы (%$#) не рекомендуется использовать.<br>Все файлы по сверстанному сайту размещайте в отдельной системе вложенных папок.<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/106717/slide-33.jpg" target="_blank" rel="noopener">Слайд 34</a><h3 class="slides-content text-center font-bold"><div><p>Создание документа<br><p>mysite<br><p>theme.html<br><p>Создайте каталог mysite<br>Откройте Notepad<br>Сохраните пустой файл под именем theme.html в</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-33.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Создание документа mysite theme.html Создайте каталог mysite Откройте Notepad Сохраните пустой файл под" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/106717/slide-33.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-33.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-33.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-33.jpg 1440w" class="slides-image"><!----><div class="slides-content">каталоге mysite<br>Откройте полученный файл и приготовьтесь верстать ☺ <br>Для используемых изображений (к примеру, fon.jpg, button.jpg) создайте вложенную папку, к примеру, img.<br>! Не допускайте хаоса в файловой структуре<br><p>img<br><p>fon.jpg<br><p>button.jpg<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/106717/slide-34.jpg" target="_blank" rel="noopener">Слайд 35</a><h3 class="slides-content text-center font-bold"><div><p>Редактирование<br><p>Напишите в документе theme.html<br><!doctype html><br><html><br><head></head><br><body></body><br></html><br>Если сейчас открыть файл в браузере: он</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-34.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Редактирование Напишите в документе theme.html Если сейчас открыть файл в браузере: он будет пустой." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/106717/slide-34.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-34.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-34.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-34.jpg 1440w" class="slides-image"><!----><div class="slides-content">будет пустой.<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/106717/slide-35.jpg" target="_blank" rel="noopener">Слайд 36</a><h3 class="slides-content text-center font-bold"><div><p>Редактирование<br><p>1. Добавьте между тегами <head> тег <title>:<br><title>Моя первая HTML страница
2. Добавьте

Редактирование 1. Добавьте между тегами тег : Моя первая HTML страница 2. Добавьте
между тегами
теги

и

:

Привет, WWW!


Любой угодный вам текст


3. Обновите страницу в браузере.

Слайд 37

Комментарии

HTML позволяет оставлять в коде страницы комментарии (например, они нужны для

Комментарии HTML позволяет оставлять в коде страницы комментарии (например, они нужны для объяснения
объяснения какой-либо части кода, чтобы в будущем не ломать себе голову, зачем вы это сделали).
В браузере комментарии не отображаются.


Слайд 38

Теги HTML

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

Теги HTML Условно теги делятся на следующие типы: теги верхнего уровня; теги заголовка
элементы;
строчные элементы;
универсальные элементы;
списки;
таблицы;
фреймы.

Слайд 39

Теги HTML

Каждый тег HTML принадлежит к определенной группе тегов, например, табличные

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

Слайд 40

Теги HTML

Теги верхнего уровня
Эти теги предназначены для формирования структуры веб-страницы и

Теги HTML Теги верхнего уровня Эти теги предназначены для формирования структуры веб-страницы и
определяют разделы заголовка и тела документа.

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

Слайд 41

Теги HTML


Тег  предназначен для хранения других элементов, цель которых — помочь браузеру в

Теги HTML Тег предназначен для хранения других элементов, цель которых — помочь браузеру
работе с данными.
Также внутри контейнера  находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.

Слайд 42

Теги HTML


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

Теги HTML Тег предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию,
которую следует выводить в документе, следует располагать именно внутри контейнера . К такой информации относится текст, изображения, таблицы, списки и др.

Слайд 43

Теги HTML

Теги заголовка документа
К этим тегам относятся элементы, которые располагаются в

Теги HTML Теги заголовка документа К этим тегам относятся элементы, которые располагаются в
контейнере . Все эти теги напрямую не отображаются в окне браузера, за исключением тега , который определяет название веб-страницы.<br><title><br>Используется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.<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/106717/slide-43.jpg" target="_blank" rel="noopener">Слайд 44</a><h3 class="slides-content text-center font-bold"><div><p>Теги HTML<br><p>Теги заголовка документа<br><meta><br>Метатеги используются для хранения информации, предназначенной для браузеров</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-43.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/106717/slide-43.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-43.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-43.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-43.jpg 1440w" class="slides-image"><!----><div class="slides-content">и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег <meta> всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.<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/106717/slide-44.jpg" target="_blank" rel="noopener">Слайд 45</a><h3 class="slides-content text-center font-bold"><div><p>Теги HTML<br><p>ВАЖНО<br>Работая с html-кодом, который придает особый вид контенту, разбивая его</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-44.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Теги HTML ВАЖНО Работая с html-кодом, который придает особый вид контенту, разбивая его" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/106717/slide-44.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-44.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-44.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-44.jpg 1440w" class="slides-image"><!----><div class="slides-content">на логические блоки, думайте о структуре<br>У веб-страницы должна быть логическая структура, которую и задают теги, используемые для разметки содержимого<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide46" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/106717/slide-45.jpg" target="_blank" rel="noopener">Слайд 46</a><h3 class="slides-content text-center font-bold"><div><p>Правила хорошего тона<br><p>Под капотом:<br>Код должен быть «валидным», правильным, написанным по правилам.</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-45.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/106717/slide-45.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-45.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-45.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-45.jpg 1440w" class="slides-image"><!----><div class="slides-content">Проверить можно на странице W3C - http://www.validator.w3.org<br>Хоть браузеру и все равно, но теги лучше писать строчными буквами<br>При необходимости не жалейте комментариев<br>В браузере:<br>Правило трех шрифтов<br>Мелькающие картинки – это плохо, тем более на фоне страницы<br>Цвет шрифта контрастен к цвету фона<br>Видео или аудио не должны включаться автоматически. Только сам пользователь включает.<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/106717/slide-46.jpg" target="_blank" rel="noopener">Слайд 47</a><h3 class="slides-content text-center font-bold"><div><p>Полезные ссылки<br><p>http://www.validator.w3.org - проверка «валидности» верстки<br>http://htmlbook.ru - все HTML теги в</div></h3></h3><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-46.jpg" onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Полезные ссылки http://www.validator.w3.org - проверка «валидности» верстки http://htmlbook.ru - все HTML теги в" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/106717/slide-46.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/106717/slide-46.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/106717/slide-46.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/106717/slide-46.jpg 1440w" class="slides-image"><!----><div class="slides-content">одном месте, с примерами<br>http://ru.wikipedia.org/wiki/Война_браузеров - немного истории<br>http://ru.wikipedia.org/wiki/HTTP - HTTP<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><!----></div><!--]--></div><div class="section"><div></div></div><form id="download" action="/api/" method="post" class="download"><!----><div class="download-description"> Имя файла: Верстка-web-страниц.-Введение.pptx <br> Количество просмотров: 85 <br> Количество скачиваний: 0</div><button class="download-btn" type="submit">Скачать</button><!----></form><div class="navigation"><div class="navigation-item"><div>- Предыдущая</div><a href="/biologiya/raznoobrazie-lis-vsyo-o-lisah" class="navigation-link">Разнообразие лис. Всё о лисах</a></div><div class="navigation-item"><div>Следующая -</div><a href="/medetsina/tromboemboliya-legochnoy-arterii-2" 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/techdays" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/282001/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/282001/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/282001/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/282001/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/282001/slide-0.jpg 1440w" class="slides-image related-itemImage"> TechDays</a></div><div class="related-item"><a href="/informatika/sayt-nauchnogo-proekta" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/258672/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/258672/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/258672/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/258672/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/258672/slide-0.jpg 1440w" class="slides-image related-itemImage"> Сайт научного проекта</a></div><div class="related-item"><a href="/informatika/html--hypertext-markup-language" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/435180/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/435180/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/435180/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/435180/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/435180/slide-0.jpg 1440w" class="slides-image related-itemImage"> HTML – Hypertext Markup Language</a></div><div class="related-item"><a href="/informatika/modeli-dannyh-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/143903/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/143903/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/143903/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/143903/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/143903/slide-0.jpg 1440w" class="slides-image related-itemImage"> Модели данных</a></div><div class="related-item"><a href="/informatika/graficheskie-redaktory-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/150900/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/150900/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/150900/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/150900/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/150900/slide-0.jpg 1440w" class="slides-image related-itemImage"> Графические редакторы</a></div><div class="related-item"><a href="/informatika/sozdanie-web-sayta-kommunikatsionnye-tehnologii-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147521/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/147521/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/147521/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/147521/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/147521/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание web-сайта. Коммуникационные технологии</a></div><div class="related-item"><a href="/informatika/kompyuternye-seti-internet-i-multimedia-tehnologii-4" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/597137/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/597137/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/597137/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/597137/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/597137/slide-0.jpg 1440w" class="slides-image related-itemImage"> Компьютерные сети, интернет и мультимедиа технологии</a></div><div class="related-item"><a href="/informatika/ispolzovanie-ikt-pri-obuchenii-fizike-v" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583748/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/583748/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/583748/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/583748/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/583748/slide-0.jpg 1440w" class="slides-image related-itemImage"> Использование ИКТ при обучении физике в школе</a></div><div class="related-item"><a href="/informatika/organizatsiya-globalnyh-setey-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/100391/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/100391/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/100391/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/100391/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/100391/slide-0.jpg 1440w" class="slides-image related-itemImage"> Организация глобальных сетей</a></div><div class="related-item"><a href="/informatika/vrfs-and-multiprotocol-bgp" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93941/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/93941/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/93941/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/93941/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/93941/slide-0.jpg 1440w" class="slides-image related-itemImage"> “VRFs” and “Multiprotocol BGP”</a></div><div class="related-item"><a href="/informatika/informatsionnaya-bezopasnost-28" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/401136/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/401136/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/401136/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/401136/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/401136/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информационная безопасность</a></div><div class="related-item"><a href="/informatika/urok-retushirovanie-fotografiy" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482483/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/482483/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/482483/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/482483/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/482483/slide-0.jpg 1440w" class="slides-image related-itemImage"> Урок Ретуширование фотографий</a></div><div class="related-item"><a href="/informatika/vstup-do-paralelnih-ta-rozpodlenih-obchislen" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/581960/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/581960/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/581960/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/581960/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/581960/slide-0.jpg 1440w" class="slides-image related-itemImage"> Вступ до паралельних та розподілених обчислень. Лекція 1</a></div><div class="related-item"><a href="/informatika/osnovnye-ponyatiya-kompyuternoy-grafiki-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/308031/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/308031/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/308031/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/308031/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/308031/slide-0.jpg 1440w" class="slides-image related-itemImage"> Основные понятия компьютерной графики</a></div><div class="related-item"><a href="/informatika/bazy-dannyh-2036" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/237827/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/237827/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/237827/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/237827/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/237827/slide-0.jpg 1440w" class="slides-image related-itemImage"> Базы данных</a></div><div class="related-item"><a href="/informatika/obzor-kreativnyh-form-raboty-v-bibliotekah" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/396322/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/396322/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/396322/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/396322/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/396322/slide-0.jpg 1440w" class="slides-image related-itemImage"> Обзор креативных форм работы в библиотеках России</a></div><div class="related-item"><a href="/informatika/razrabotka-informatsionnoy-sistemy-dlya-too-fin" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192597/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/192597/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/192597/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/192597/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/192597/slide-0.jpg 1440w" class="slides-image related-itemImage"> Разработка информационной системы для ТОО Fin-apps</a></div><div class="related-item"><a href="/informatika/layfhaki-dlya-microsoft-word" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/145196/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/145196/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/145196/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/145196/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/145196/slide-0.jpg 1440w" class="slides-image related-itemImage"> Лайфхаки для Microsoft Word</a></div><div class="related-item"><a href="/informatika/podderzhanie-imidzha-biblioteki-sredi-molodezhi-s" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276036/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/276036/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/276036/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/276036/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/276036/slide-0.jpg 1440w" class="slides-image related-itemImage"> Поддержание имиджа библиотеки среди молодежи с использованием онлайн -технологий</a></div><div class="related-item"><a href="/informatika/configure-aaa-authentication-on-cisco-routers" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/285472/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/285472/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/285472/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/285472/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/285472/slide-0.jpg 1440w" class="slides-image related-itemImage"> Configure AAA authentication on Cisco routers</a></div><div class="related-item"><a href="/informatika/voshodyashchaya-sortirovka-sliyaniem-lektsiya-4-2" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/258159/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/258159/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/258159/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/258159/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/258159/slide-0.jpg 1440w" class="slides-image related-itemImage"> Восходящая сортировка слиянием. Лекция 4 (2)</a></div><div class="related-item"><a href="/informatika/sozdanie-i-podtverzhdenie-uchetnoy-zapisi-esia" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368556/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/368556/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/368556/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/368556/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/368556/slide-0.jpg 1440w" class="slides-image related-itemImage"> Создание и подтверждение учетной записи ЕСИА в центре обслуживания</a></div><div class="related-item"><a href="/informatika/upravlenie-2d-personazhem" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/195669/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/195669/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/195669/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/195669/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/195669/slide-0.jpg 1440w" class="slides-image related-itemImage"> Управление 2D персонажем</a></div><div class="related-item"><a href="/informatika/da-101-protecting-your-domain-admin" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/3309/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/3309/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/3309/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/3309/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/3309/slide-0.jpg 1440w" class="slides-image related-itemImage"> DA 101 Protecting your Domain Admin Account</a></div><div class="related-item"><a href="/informatika/arhitektura-kompyuterov-i-ih-osnovnye-harakteristiki" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/129928/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/129928/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/129928/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/129928/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/129928/slide-0.jpg 1440w" class="slides-image related-itemImage"> Архитектура компьютеров и их основные характеристики</a></div><div class="related-item"><a href="/informatika/programming-languages-3" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/431814/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/431814/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/431814/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/431814/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/431814/slide-0.jpg 1440w" class="slides-image related-itemImage"> Programming languages</a></div><div class="related-item"><a href="/informatika/informatsiya-v-nezhivoy-i-zhivoy-prirode-1" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/292182/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/292182/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/292182/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/292182/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/292182/slide-0.jpg 1440w" class="slides-image related-itemImage"> Информация в неживой и живой природе</a></div><div class="related-item"><a href="/informatika/bitva-za-kilobity" class="related-itemLink"><img src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/511095/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/511095/slide-0.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/511095/slide-0.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/511095/slide-0.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/511095/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:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,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:x,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:i,item_slide_header:y,item_images:z,item_images_tag:A,item_words_h3:c,item_words_tag:B,item_words_1:j,routing:C,item_slide_skipping:D,item_download_timeout:E,item_slider_width:F,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:k,header_bg:h,accent:h}},social:G}},categories:{result:[{id:H,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:H,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:I,pseudoname:"informatika"},{id:109,ordering:9,name:"История",pseudoname:"istoriya"},{id:139,ordering:10,name:"Литература",pseudoname:"literatura"},{id:119,ordering:j,name:"Маркетинг",pseudoname:"marketing"},{id:114,ordering:12,name:"Математика",pseudoname:"matematika"},{id:138,ordering:i,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"}]},item:{result:{id:106717,name:l,category:I,count:48,jpg:"jpg\u002F106717",hits:85,download:b,h1:"Верстка web-страниц. Введение презентация",meta:{h1:l,title:l,description:"Верстка web-страниц. Введение презентация на тему, доклад, Информатика",keywords:"Верстка web-страниц. Введение, презентация, доклад, проект, скачать, на тему, PowerPoint, урок, класс, школа, Информатика",download_link:a},text:"Вы можете изучить и скачать доклад-презентацию на тему Презентация на тему Верстка web-страниц. Введение из раздела Информатика. Презентация на заданную тему содержит 48 слайдов. Для просмотра воспользуйтесь проигрывателем, если материал оказался полезным для Вас - поделитесь им с друзьями с помощью социальных кнопок и добавьте наш сайт презентаций в закладки!",seo_text:"\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОсновные понятия\u003Cbr\u003EИнструментарий\u003Cbr\u003EИстория\u003Cbr\u003EСведения о HTML и CSS\u003Cbr\u003EHTML документ и его структура\u003Cbr\u003E \u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EВеб-страница - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется",file:"Верстка-web-страниц.-Введение.pptx",texts:["\u003Cp\u003EВерстка web-страниц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВведение\u003Cbr\u003E\u003Cbr\u003EТитова Ольга Ивановна\u003Cbr\u003EМинск, 2017 \u003Cbr\u003E","\u003Cp\u003EСодержание\u003Cbr\u003E\u003Cp\u003EОсновные понятия\u003Cbr\u003EИнструментарий\u003Cbr\u003EИстория\u003Cbr\u003EСведения о HTML и CSS\u003Cbr\u003EHTML документ и его структура\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EВеб-страница - документ или информационный ресурс Всемирной паутины, доступ к которому осуществляется с помощью веб-браузера.\u003Cbr\u003EБывают двух типов: статические и динамические.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EСервер - программное обеспечение, принимающее запросы от клиентов.\u003Cbr\u003EКлиент – в нашем случае браузер.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EHTTP - (англ. HyperText Transfer Protocol — «протокол передачи гипертекста») — протокол прикладного уровня передачи данных (изначально — в виде гипертекстовых документов). Основой HTTP является технология «клиент-сервер».\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EСайт - (от англ. website: web — «паутина, сеть» и site — «место», буквально «место, сегмент, часть в сети») — совокупность электронных документов (файлов) частного лица или организации в Сети.\u003Cbr\u003E","\u003Cp\u003EСтруктура сайта\u003Cbr\u003E\u003Cp\u003EЛогическая –\u003Cbr\u003Eинформационное структурирование (что, где, в каком объеме будет размещено, каким образом будет выглядеть система навигации, доступ к каким объектам и каким образом будет организован и т.п.)\u003Cbr\u003EФизическая – \u003Cbr\u003Eтехническая реализация спроектированной информационной структуры:\u003Cbr\u003Eформирование файловой системы для сайта;\u003Cbr\u003Eопределение стартовой страницы;\u003Cbr\u003Eподключаемые СУБД и БД;\u003Cbr\u003Eи т.п.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EURL - (англ. URL — Uniform Resource Locator) — единообразный локатор (определитель местонахождения) ресурса. Ранее назывался Universal Resource Locator — универсальный указатель ресурса. URL — это стандартизированный способ записи адреса ресурса в сети Интернет.\u003Cbr\u003EИли просто ссылка ☺\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EHTML - (HyperText Markup Language) — язык гипертекстовой разметки. \u003Cbr\u003EДокумент HTML представляет в своей основе текстовый документ, в котором имеются специальные символы – теги, определяющие структуру документа и позволяющие осуществлять связь между несколькими подобными документами.\u003Cbr\u003E\u003Cbr\u003EИменно из-за возможности размещать в документе ссылки на другие документы и с их помощью осуществлять переходы данный язык называется гипертекстовым.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EHTML – структурирует документ, упорядочивая информацию в структурные единицы – заголовки, абзацы, списки и другие элементы.\u003Cbr\u003ECSS – взаимодействуя с браузером, придает документу определенный стилевой формат – цвет, размер, отступы и другие оформительские свойства.\u003Cbr\u003EПример,\u003Cbr\u003EОбъект – фраза из нескольких слов\u003Cbr\u003EHTML – тип объекта (абзац или заголовок), последовательность при размещении в общем контенте.\u003Cbr\u003ECSS – тип шрифта, размер шрифта, цвет начертания, наличие обрамления текста рамкой, отступ от рядом расположенных объектов.\u003Cbr\u003E","\u003Cp\u003EОсновные понятия\u003Cbr\u003E\u003Cp\u003EПреимущества CSS:\u003Cbr\u003Eбольше возможностей форматирования;\u003Cbr\u003Eприменение одного свойства к произвольному количеству однотипных объектов;\u003Cbr\u003Eописание свойств с использованием стилей значительно уменьшает суммарный объем разрабатываемого ресурса;\u003Cbr\u003Eупрощается процесс обновления ресурса при внесении стилевых изменений.\u003Cbr\u003E","\u003Cp\u003EИнструментарий\u003Cbr\u003E\u003Cp\u003EДля начальной разработки веб-страниц или даже небольшого сайта (набор страниц, связанных между собой ссылками и единым оформлением), нам понадобятся следующие программы:\u003Cbr\u003EТекстовый редактор.\u003Cbr\u003EБраузер(ы) для просмотра результатов.\u003Cbr\u003EВалидатор — программа для проверки синтаксиса HTML и выявления ошибок в коде (для CSS также).\u003Cbr\u003EГрафический редактор.\u003Cbr\u003EСправочная литература.\u003Cbr\u003EЭто необходимый минимум\u003Cbr\u003E","\u003Cp\u003EИстория HTML\u003Cbr\u003E\u003Cp\u003ESGML – предок HTML. В свое время был разработан для для совместного использования машинно-читаемого текста в больших правительственных программах (например, аэрокосмических).\u003Cbr\u003EHTML – разработан в конце 1980-х годов. Создавался для обмена научной и технической информацией между университетами, давая возможность работать с ним без серьезной профессиональной подготовки.\u003Cbr\u003E","\u003Cp\u003EИстория HTML\u003Cbr\u003E\u003Cp\u003EHTML 2.0 – одобрен как стандарт в 1995\u003Cbr\u003EОт версии к версии, до текущего HTML 5 добавлялись дополнительные возможности представления информации на веб-странице.\u003Cbr\u003EXHTML 1.0 – оформлен как стандарт в 2000 году. Смесь XML + HTML 4, сделанная ради стандартизации разработки веб-страниц. Идею признали несостоятельной, и почти приняв XHTML 2.0, разговоры о продолжении стандарта прекратились. Вместо этого силы были брошены на разработку HTML 5.\u003Cbr\u003E","\u003Cp\u003EРазвитие HTML\u003Cbr\u003E\u003Cp\u003EОсновные причины развития HTML:\u003Cbr\u003EРазвитие мультимедиа-возможностей ПК\u003Cbr\u003EПоявление карманных компьютеров и смартфонов, планшетов\u003Cbr\u003EНеобходимость стандартизации\u003Cbr\u003EУпрощение разработки\u003Cbr\u003EЗа всем этим следит Консорциум Всемирной Паутины (World Wide Web Consortium, W3C), который был создан в 1994 году.\u003Cbr\u003E","\u003Cp\u003EСтандарт сегодня\u003Cbr\u003E\u003Cp\u003EСтандарт веб-разработки сегодня:\u003Cbr\u003EHTML 4.1 (HTML 5 уже практикуется), CSS 2.1 (CSS 3.0)\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EГлавным элементом разметки является тег. \u003Cbr\u003EОн не отображается непосредственно в браузере, но влияет на то, каким образом отображаются остальные элементы – текст, ссылки, изображения и другой контент.\u003Cbr\u003E\u003Cтег атрибут1=\"значение\" атрибут2=\"значение\"\u003E \u003Cbr\u003E\u003Cтег атрибут1=\"значение\" атрибут2=\"значение\"\u003E...\u003C\u002Fтег\u003E\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003E\u003Cтег\u003E\u003C\u002Fтег\u003E - парный тег (контейнер)\u003Cbr\u003E\u003Cтег \u002F\u003E - непарный тег\u003Cbr\u003EПримеры:\u003Cbr\u003E\u003Ctitle\u003EЗаголовок страницы\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003Cstrong\u003EВнутри этого тега все символы выделены жирным\u003C\u002Fstrong\u003E\u003Cbr\u003E\u003Cimg src=“image.jpg” \u002F\u003E - откуда и какую картинку необходимо взять браузеру для отображения на странице\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EПарный тег (контейнер)\u003Cbr\u003EПарные теги, называемые по-другому контейнеры, состоят из двух частей — открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный — \u003Cтег\u003E, а в закрывающем используется слэш — \u003C\u002Fтег\u003E. Допускается вкладывать в контейнер другие теги, однако следует соблюдать их порядок. \u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EЕсли связать открывающий и закрывающий тег между собой скобкой, как показано на рис., то несколько скобок обозначающих разные контейнеры, не должны пересекаться между собой. Любое пересечение условных скобок говорит о том, что правильная последовательность тегов нарушена.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EТеги:\u003Cbr\u003EОбрамляются \u003C\u003E.\u003Cbr\u003EВ теге могут находиться атрибуты (дополнительные параметры для элементов). Атрибуты могут быть практически у любого тега.\u003Cbr\u003EСодержимое тега пишется между открывающим и закрывающим тегами. Если тег непарный, то содержимое пишется в атрибуте. \u003Cbr\u003EТеги могут следовать линейно, а могут располагаться вложенно (на подобие вложенных скобок).\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003E\u003Ca href=“index.html”\u003EКрасивая ссылка на главную страницу\u003C\u002Fa\u003E\u003Cbr\u003E\u003Cp\u003E \u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EДля тегов любого типа действуют определенные правила их использования. \u003Cbr\u003EПричем, некоторые правила обязательны для выполнения, а другие являются рекомендациями, т.е. их можно выполнять, а можно и нет.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EАтрибуты тегов и кавычки\u003Cbr\u003EСогласно спецификации HTML все значения атрибутов тегов следует указывать в двойных (\"пример\") или одинарных кавычках ('пример'). \u003Cbr\u003EОтсутствие кавычек не приведет к ошибкам, браузеры во многих случаях достаточно корректно обрабатывают код и без кавычек, за исключением текста, содержащего пробелы.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EТеги можно писать как прописными, так и строчными символами\u003Cbr\u003EЛюбые теги, а также их атрибуты нечувствительны к регистру, поэтому вы вольны выбирать сами, как писать — \u003CBR\u003E, \u003CBr\u003E или \u003Cbr\u003E. В любом случае рекомендуется придерживаться выбранной формы записи на протяжении всех страниц сайта. \u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EПереносы строк\u003Cbr\u003EВнутри тега между его атрибутами допустимо ставить перенос строк. Однако, при этом следует учитывать «читабельность» и визуальное восприятие кода – лучше, когда код воспринимается в той логической структуре, в которой он создавался. \u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EНеизвестные теги и атрибуты\u003Cbr\u003EЕсли какой-либо тег или его атрибут был написан неверно, то браузер проигнорирует подобный тег и будет отображать текст так, словно тега и не было. \u003Cbr\u003EОпять же, следует избегать неизвестных тегов, поскольку код HTML не пройдет валидацию.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EПорядок тегов\u003Cbr\u003EСуществует определенная иерархия вложенности тегов. Например, тег \u003Ctitle\u003E должен находиться внутри контейнера \u003Chead\u003E и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.\u003Cbr\u003EЕсли теги между собой равноценны в иерархии связи, то их последовательность не имеет значения. Так, можно поменять местами теги \u003Ctitle\u003E и \u003Cmeta\u003E, на конечном результате это никак не скажется.\u003Cbr\u003E","\u003Cp\u003EСтруктура документа\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML\u003E - обозначение типа документа для браузера \u002F\u002F в данном случае определение типа документа для HTML5 самое простое\u003Cbr\u003E\u003Chtml\u003E - начало документа\u003Cbr\u003E\u003Chead\u003E - служебная часть документа\u003Cbr\u003E\t\u003Ctitle\u003EЗаголовок страницы\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E - содержательная часть документа\u003Cbr\u003E\u003C\u002Fbody\u003E\t\u003Cbr\u003E\u003C\u002Fhtml\u003E - конец документа\u003Cbr\u003E","\u003Cp\u003EСтруктура документа\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE html PUBLIC \u003Cbr\u003E\"-\u002F\u002FW3C\u002F\u002FDTD HTML 4.01 Transitional\u002F\u002FEN\"\u003Cbr\u003E\"http:\u002F\u002Fwww.w3.org\u002FTR\u002Fhtml4\u002Floose.dtd\"\u003E \u003Cbr\u003E- таким образом выглядит обозначение типа документа для стандартной страницы на HTML4.01\u003Cbr\u003E","\u003Cp\u003EСтруктура документа\u003Cbr\u003E\u003Cp\u003E\u003C!DOCTYPE HTML\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003Cbr\u003E \u003Ctitle\u003EЗаголовок страницы\u003C\u002Ftitle\u003E\u003Cbr\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003Cbr\u003E\u003C\u002Fbody\u003E\t\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003E","\u003Cp\u003EСлужебная информация\u003Cbr\u003E\u003Cp\u003EТег \u003Ctitle\u003E с заголовком страницы\u003Cbr\u003EТеги \u003Cmeta \u002F\u003E - в основном используются для браузеров и поисковых систем\u003Cbr\u003EТеги \u003Clink \u002F\u003E - подключение CSS\u003Cbr\u003EТеги \u003Cscript\u003E - подключение JS\u003Cbr\u003E","\u003Cp\u003EРабота с документом\u003Cbr\u003E\u003Cp\u003EСоздавать и редактировать файлы можно в любом текстовом редакторе (к примеру, NotePad++)\u003Cbr\u003EШаблон имени файла: *.html – ваш компьютер поймет, что этот файл нужно открывать в браузере\u003Cbr\u003EВ имени файла только латинские буквы, и цифры, подчеркивания(_) и дефисы (-).\u003Cbr\u003EРусские буквы, пробелы и спец.символы (%$#) не рекомендуется использовать.\u003Cbr\u003EВсе файлы по сверстанному сайту размещайте в отдельной системе вложенных папок.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСоздание документа\u003Cbr\u003E\u003Cp\u003Emysite\u003Cbr\u003E\u003Cp\u003Etheme.html\u003Cbr\u003E\u003Cp\u003EСоздайте каталог mysite\u003Cbr\u003EОткройте Notepad\u003Cbr\u003EСохраните пустой файл под именем theme.html в каталоге mysite\u003Cbr\u003EОткройте полученный файл и приготовьтесь верстать ☺ \u003Cbr\u003EДля используемых изображений (к примеру, fon.jpg, button.jpg) создайте вложенную папку, к примеру, img.\u003Cbr\u003E\u003Cbr\u003E! Не допускайте хаоса в файловой структуре\u003Cbr\u003E\u003Cp\u003Eimg\u003Cbr\u003E\u003Cp\u003Efon.jpg\u003Cbr\u003E\u003Cp\u003Ebutton.jpg\u003Cbr\u003E","\u003Cp\u003EРедактирование\u003Cbr\u003E\u003Cp\u003EНапишите в документе theme.html\u003Cbr\u003E\u003C!doctype html\u003E\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003E\u003Chead\u003E\u003C\u002Fhead\u003E\u003Cbr\u003E\u003Cbody\u003E\u003C\u002Fbody\u003E\u003Cbr\u003E\u003C\u002Fhtml\u003E\u003Cbr\u003EЕсли сейчас открыть файл в браузере: он будет пустой.\u003Cbr\u003E","\u003Cp\u003EРедактирование\u003Cbr\u003E\u003Cp\u003E1. Добавьте между тегами \u003Chead\u003E тег \u003Ctitle\u003E:\u003Cbr\u003E\u003Ctitle\u003EМоя первая HTML страница\u003C\u002Ftitle\u003E\u003Cbr\u003E2. Добавьте между тегами \u003Cbody\u003E \u003Cbr\u003Eтеги \u003Cp\u003E и \u003Ch1\u003E:\u003Cbr\u003E\u003Ch1\u003EПривет, WWW!\u003C\u002Fh1\u003E\u003Cbr\u003E\u003Cp\u003EЛюбой угодный вам текст\u003C\u002Fp\u003E\u003Cbr\u003E3. Обновите страницу в браузере.\u003Cbr\u003E","\u003Cp\u003EКомментарии\u003Cbr\u003E\u003Cp\u003EHTML позволяет оставлять в коде страницы комментарии (например, они нужны для объяснения какой-либо части кода, чтобы в будущем не ломать себе голову, зачем вы это сделали). \u003Cbr\u003EВ браузере комментарии не отображаются.\u003Cbr\u003E\u003C!-- Комментарий --\u003E\u003Cbr\u003E\u003C!-- \u003Cbr\u003E\u003Ch1\u003EЗакомментированный заголовок страницы\u003C\u002Fh1\u003E\u003Cbr\u003E--\u003E\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EУсловно теги делятся на следующие типы:\u003Cbr\u003Eтеги верхнего уровня;\u003Cbr\u003Eтеги заголовка документа;\u003Cbr\u003Eблочные элементы;\u003Cbr\u003Eстрочные элементы;\u003Cbr\u003Eуниверсальные элементы;\u003Cbr\u003Eсписки;\u003Cbr\u003Eтаблицы;\u003Cbr\u003Eфреймы.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EКаждый тег HTML принадлежит к определенной группе тегов, например, табличные теги направлены на формирование таблиц и не могут применяться для других целей.\u003Cbr\u003EСледует учитывать, что один и тот же тег может одновременно принадлежать разным группам, например, теги \u003Col\u003E и\u003Cul\u003E относятся к категории списков, но также являются и блочными элементами.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EТеги верхнего уровня\u003Cbr\u003EЭти теги предназначены для формирования структуры веб-страницы и определяют разделы заголовка и тела документа.\u003Cbr\u003E\u003Chtml\u003E\u003Cbr\u003EТег \u003Chtml\u003E является контейнером, который заключает в себе всё содержимое веб-страницы, включая теги \u003Chead\u003E и \u003Cbody\u003E. Открывающий и закрывающий теги \u003Chtml\u003E в документе необязательны, но хороший стиль диктует непременное их использование.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003E\u003Chead\u003E\u003Cbr\u003EТег \u003Chead\u003E предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными. \u003Cbr\u003EТакже внутри контейнера \u003Chead\u003E находятся метатеги, которые используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003E\u003Cbody\u003E\u003Cbr\u003EТег \u003Cbody\u003E предназначен для хранения содержания веб-страницы, отображаемого в окне браузера. Информацию, которую следует выводить в документе, следует располагать именно внутри контейнера \u003Cbody\u003E. К такой информации относится текст, изображения, таблицы, списки и др.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EТеги заголовка документа\u003Cbr\u003EК этим тегам относятся элементы, которые располагаются в контейнере \u003Chead\u003E. Все эти теги напрямую не отображаются в окне браузера, за исключением тега \u003Ctitle\u003E, который определяет название веб-страницы.\u003Cbr\u003E\u003Ctitle\u003E\u003Cbr\u003EИспользуется для отображения строки текста в левом верхнем углу окна браузера, а также на вкладке. Такая строка сообщает пользователю название сайта и другую информацию, которую добавляет разработчик.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EТеги заголовка документа\u003Cbr\u003E\u003Cmeta\u003E\u003Cbr\u003EМетатеги используются для хранения информации, предназначенной для браузеров и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам для получения описания сайта, ключевых слов и других данных. Хотя тег \u003Cmeta\u003E всего один, он имеет несколько атрибутов, поэтому к нему и применяется множественное число.\u003Cbr\u003E","\u003Cp\u003EТеги HTML\u003Cbr\u003E\u003Cp\u003EВАЖНО\u003Cbr\u003EРаботая с html-кодом, который придает особый вид контенту, разбивая его на логические блоки, думайте о структуре\u003Cbr\u003EУ веб-страницы должна быть логическая структура, которую и задают теги, используемые для разметки содержимого\u003Cbr\u003E","\u003Cp\u003EПравила хорошего тона\u003Cbr\u003E\u003Cp\u003EПод капотом:\u003Cbr\u003EКод должен быть «валидным», правильным, написанным по правилам. Проверить можно на странице W3C - http:\u002F\u002Fwww.validator.w3.org\u003Cbr\u003EХоть браузеру и все равно, но теги лучше писать строчными буквами\u003Cbr\u003EПри необходимости не жалейте комментариев\u003Cbr\u003EВ браузере:\u003Cbr\u003EПравило трех шрифтов\u003Cbr\u003EМелькающие картинки – это плохо, тем более на фоне страницы\u003Cbr\u003EЦвет шрифта контрастен к цвету фона\u003Cbr\u003EВидео или аудио не должны включаться автоматически. Только сам пользователь включает.\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EПолезные ссылки\u003Cbr\u003E\u003Cp\u003Ehttp:\u002F\u002Fwww.validator.w3.org - проверка «валидности» верстки\u003Cbr\u003Ehttp:\u002F\u002Fhtmlbook.ru - все HTML теги в одном месте, с примерами\u003Cbr\u003Ehttp:\u002F\u002Fru.wikipedia.org\u002Fwiki\u002FВойна_браузеров - немного истории\u003Cbr\u003Ehttp:\u002F\u002Fru.wikipedia.org\u002Fwiki\u002FHTTP - HTTP\u003Cbr\u003E\u003Cbr\u003E","\u003Cp\u003EСпасибо за внимание\u003Cbr\u003E"],href:"\u002Finformatika\u002Fverstka-web-stranits-vvedenie",href_category:"\u002Finformatika",date:1627563038,related:[{id:282001,name:"TechDays",href:"\u002Finformatika\u002Ftechdays",jpg:"jpg\u002F282001"},{id:258672,name:"Сайт научного проекта",href:"\u002Finformatika\u002Fsayt-nauchnogo-proekta",jpg:"jpg\u002F258672"},{id:435180,name:"HTML – Hypertext Markup Language",href:"\u002Finformatika\u002Fhtml--hypertext-markup-language",jpg:"jpg\u002F435180"},{id:143903,name:"Модели данных",href:"\u002Finformatika\u002Fmodeli-dannyh-3",jpg:"jpg\u002F143903"},{id:150900,name:"Графические редакторы",href:"\u002Finformatika\u002Fgraficheskie-redaktory-3",jpg:"jpg\u002F150900"},{id:147521,name:"Создание web-сайта. Коммуникационные технологии",href:"\u002Finformatika\u002Fsozdanie-web-sayta-kommunikatsionnye-tehnologii-4",jpg:"jpg\u002F147521"},{id:597137,name:"Компьютерные сети, интернет и мультимедиа технологии",href:"\u002Finformatika\u002Fkompyuternye-seti-internet-i-multimedia-tehnologii-4",jpg:"jpg\u002F597137"},{id:583748,name:"Использование ИКТ при обучении физике в школе",href:"\u002Finformatika\u002Fispolzovanie-ikt-pri-obuchenii-fizike-v",jpg:"jpg\u002F583748"},{id:100391,name:"Организация глобальных сетей",href:"\u002Finformatika\u002Forganizatsiya-globalnyh-setey-1",jpg:"jpg\u002F100391"},{id:93941,name:"“VRFs” and “Multiprotocol BGP”",href:"\u002Finformatika\u002Fvrfs-and-multiprotocol-bgp",jpg:"jpg\u002F93941"},{id:401136,name:"Информационная безопасность",href:"\u002Finformatika\u002Finformatsionnaya-bezopasnost-28",jpg:"jpg\u002F401136"},{id:482483,name:"Урок Ретуширование фотографий",href:"\u002Finformatika\u002Furok-retushirovanie-fotografiy",jpg:"jpg\u002F482483"},{id:581960,name:"Вступ до паралельних та розподілених обчислень. Лекція 1",href:"\u002Finformatika\u002Fvstup-do-paralelnih-ta-rozpodlenih-obchislen",jpg:"jpg\u002F581960"},{id:308031,name:"Основные понятия компьютерной графики",href:"\u002Finformatika\u002Fosnovnye-ponyatiya-kompyuternoy-grafiki-1",jpg:"jpg\u002F308031"},{id:237827,name:"Базы данных",href:"\u002Finformatika\u002Fbazy-dannyh-2036",jpg:"jpg\u002F237827"},{id:396322,name:"Обзор креативных форм работы в библиотеках России",href:"\u002Finformatika\u002Fobzor-kreativnyh-form-raboty-v-bibliotekah",jpg:"jpg\u002F396322"},{id:192597,name:"Разработка информационной системы для ТОО Fin-apps",href:"\u002Finformatika\u002Frazrabotka-informatsionnoy-sistemy-dlya-too-fin",jpg:"jpg\u002F192597"},{id:145196,name:"Лайфхаки для Microsoft Word",href:"\u002Finformatika\u002Flayfhaki-dlya-microsoft-word",jpg:"jpg\u002F145196"},{id:276036,name:"Поддержание имиджа библиотеки среди молодежи с использованием онлайн -технологий",href:"\u002Finformatika\u002Fpodderzhanie-imidzha-biblioteki-sredi-molodezhi-s",jpg:"jpg\u002F276036"},{id:285472,name:"Configure AAA authentication on Cisco routers",href:"\u002Finformatika\u002Fconfigure-aaa-authentication-on-cisco-routers",jpg:"jpg\u002F285472"},{id:258159,name:"Восходящая сортировка слиянием. Лекция 4 (2)",href:"\u002Finformatika\u002Fvoshodyashchaya-sortirovka-sliyaniem-lektsiya-4-2",jpg:"jpg\u002F258159"},{id:368556,name:"Создание и подтверждение учетной записи ЕСИА в центре обслуживания",href:"\u002Finformatika\u002Fsozdanie-i-podtverzhdenie-uchetnoy-zapisi-esia",jpg:"jpg\u002F368556"},{id:195669,name:"Управление 2D персонажем",href:"\u002Finformatika\u002Fupravlenie-2d-personazhem",jpg:"jpg\u002F195669"},{id:3309,name:"DA 101 Protecting your Domain Admin Account",href:"\u002Finformatika\u002Fda-101-protecting-your-domain-admin",jpg:"jpg\u002F3309"},{id:129928,name:"Архитектура компьютеров и их основные характеристики",href:"\u002Finformatika\u002Farhitektura-kompyuterov-i-ih-osnovnye-harakteristiki",jpg:"jpg\u002F129928"},{id:431814,name:"Programming languages",href:"\u002Finformatika\u002Fprogramming-languages-3",jpg:"jpg\u002F431814"},{id:292182,name:"Информация в неживой и живой природе",href:"\u002Finformatika\u002Finformatsiya-v-nezhivoy-i-zhivoy-prirode-1",jpg:"jpg\u002F292182"},{id:511095,name:"Битва за килобиты",href:"\u002Finformatika\u002Fbitva-za-kilobity",jpg:"jpg\u002F511095"}],navigation:{next:"\u002Fmedetsina\u002Ftromboemboliya-legochnoy-arterii-2",next_name:"Тромбоэмболия легочной артерии",prev:"\u002Fbiologiya\u002Fraznoobrazie-lis-vsyo-o-lisah",prev_name:"Разнообразие лис. Всё о лисах"}}}},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:k,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:m,main_text:a,main_title:n,main_description:o,main_keywords:p,main_image:a},app:{logo_image:q,logo_image_width:r,logo_image_height:s,logo_text:a,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,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:x,footer_before:a,footer:a,dark_theme:c,strategy:{image_alt_words:i,item_slide_header:y,item_images:z,item_images_tag:A,item_words_h3:c,item_words_tag:B,item_words_1:j,routing:C,item_slide_skipping:D,item_download_timeout:E,item_slider_width:F,item_show_pdf:e,item_show_contents:e,item_show_filename:e},colors:{header_text:k,header_bg:h,accent:h}},social:G,token:a}}}}("",0,false,"image\u002Fpng",true,"any","maskable","#d53032",13,11,"#ffffff","Верстка web-страниц. Введение","Учебные презентации","Презентации в PowerPoint на разные темы","Презентации, проекты, доклады в PowerPoint на разные темы для учебы","Презентация, на тему, урок, класс, PowerPoint, скачати презентацію, фон, шаблон, доклад, проект.","images\u002Fdata\u002Flogo.png",185,40,720,480,"6LeioWIpAAAAAGqMN4KqMVIkekcMW7fBKHjXCd-a","2503267","mypreza@ya.ru","h3a","images_before","none","h3","category","both",80,800,"\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E",1,"Информатика","Mypreza","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))</script><script type="module" src="/_nuxt/entry.9a8afa73.js" crossorigin></script></body> </html>