Html структура: Базовая структура HTML-документа с объяснением каждой строчки / Хабр

Содержание

Базовая структура HTML файла — Vladimir Shaitan на DTF

Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.

358 просмотров

Пример базовой структуры показан ниже.

Рассмотрим ее подробнее.

<!DOCTYPE html> <html lang=»ru»> <head> <meta charset=»UTF-8″> <title>Моя первая страница</title> </head> <body> </body> </html>

Начнем с тега DOCTYPE

<!DOCTYPE html>

Задача этого тега — указать браузеру стандарт HTML который используется в документе. Этот тег не будет показан на странице, но будет присутствовать в HTML коде страницы.

Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.

Вы можете видеть и другие версии этого тега, более объемные, обычно такие теги можно встретить на сайтах сделанных 5 — 10 лет назад.

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

Тег <html>

Тег <html> — парный, очень важный тег, благодаря ему браузер понимает, где начинается контент который нужно обрабатывать как HTML.

Также тег <html> имеет обязательный атрибут lang, в качестве значения мы указываем язык, на котором должна отображаться страница. Эта информация помогает браузеру считывать специфические символы которые могу встречаться в различных языках.

В качестве значения передаем сокращения языков: ru, en и тд.

Тег <head>

Тег <head> — парный тег, нужен для хранения служебной, внутри него возможны различные сочетания тегов, которые будут указывать браузеру: название страницы, описание, ключевые слова. Эта информация называется ‘метаинформацией‘. Также метаинформация активно используется для продвижения сайта в поисковых системах (

Google, Yandex и тд.

Все что находится внутри тега <head> не будет отображено пользователю.

Тег <meta>

<meta>

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

В данный момент одним из важных <meta> тегов, является <meta> в котором указывается кодировка сайта. Кодировка помогает правильно интерпретировать текст. Указываем мы ее потому что у разных пользователей в их системе может быть указана разная кодировка, из-за чего контент сайта может выглядеть не так как мы ожидаем.

Самой универсальной кодировкой является UTF-8, ее мы и указываем.

Тег <title>

<title>Заголовок страницы</title>

<title> — парный тег, располагается внутри тега <head>, внутри него указываем текст который будет выводиться во вкладке нашего сайта.

Тег <body>

<body> — парный тег, располагается внутри тега <html>, после закрывающего тега </head>. Этот тег является телом нашей страницы и внутри него мы описываем HTML структуру нашего сайта которую будет видеть пользователь.

Пример конечной структуры в файле index.html.

Базовая структура HTML файла

Любой HTML файл начинается с базовой структуры. Обычно она включает в себя теги, которые есть в любом HTML файле.

Пример базовой структуры показан ниже.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя первая страница</title>
</head>
<body>
</body>
</html>

* * *

Начнем с тега DOCTYPE

<!DOCTYPE html>

Так как мы используем последний стандарт HTML, а именно HTML5, то нам нужно использовать именно этот тег.

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

* * *

Тег <html>

<html></html>

В качестве значения передаем сокращения языков: ru, en и тд.

* * *

Тег <head>

<head></head>

метаинформацией‘. Также метаинформация активно используется для продвижения сайта в поисковых системах (Google, Yandex и тд.).

Все что находится внутри тега <head> не будет отображено пользователю.

* * *

Тег <meta>

<meta>

<meta charset="UTF-8">

Самой универсальной кодировкой является UTF-8

, ее мы и указываем.

* * *

Тег <title>

<title>Заголовок страницы</title>

* * *

Тег <body>

<body></body>

Пример конечной структуры в файле index.html.

P.S. Больше уроков у меня на канале

Структура HTML и теги

HTML использует теги для управления структурой веб-страницы. Смотрите, как Мэтт Хоган объясняет больше.

Просмотреть стенограмму

2.6

Теперь пришло время попробовать изменить внешний вид контента на вашей веб-странице. Давайте посмотрим на списки. На этой веб-странице фан-клуба Raspberry Pi у нас есть абзац, описывающий технические характеристики Raspberry Pi 4. Это довольно сложно читать. Лучше поместим его в какой-нибудь список. У нас может быть два вида списков. Есть неупорядоченный список, который возвращает маркеры, и упорядоченный список, который возвращает числа. Поэтому для этого нам, вероятно, нужны маркеры. Итак, мы должны указать — поместите в HTML то, что мы собираемся поместить в неупорядоченный список, ul.

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

92,5

Здесь. Перетащите его в конец этой точки. Избавьтесь от этой запятой. И вы можете видеть справа, у нас есть два маркера. Вы также можете продолжать и делать – и добавлять в этот список. Если вы хотите сделать упорядоченный список, все, что нам нужно сделать, это изменить тег ul на тег ol.

121.9

И вы можете видеть, что справа он меняется на цифры 1 и 2. Мы также можем изменить внешний вид текста на нашей веб-странице. Поэтому, если мы хотим выделить это слово фантастическим курсивом, мы можем использовать тег em.

142.2

И мы можем просто перетащить конец тега em в конец фантастического. И вы можете увидеть его выделенным курсивом здесь, в нашем предварительном просмотре. Мы также можем выделить текст, используя сильный тег.

161,9

Итак, мы можем ввести сильный тег, взять конечный тег и перетащить его в конец Raspberry Pi. И вы видите это жирным шрифтом справа.

178.1

Отлично. Также есть место для цитаты. Итак, вот цитата с сайта Raspberry Pi. Но это выглядит так же, как и остальная часть страницы. Это не означает, что оно пришло откуда-то еще. Таким образом, мы можем использовать тег блочной цитаты. Итак, давайте найдем его в HTML.

206,3

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

225.1

Вот и конец этой линии.

230.9

И вставьте его. И вы можете видеть на предварительном просмотре здесь, теперь он имеет отступ. Таким образом, это создает впечатление присутствия откуда-то еще.

242,5

Здесь также есть место для изображения. Вот Raspberry Pi 4, но у нас пока нет изображения. Итак, нам нужно откуда-то получить изображение. Итак, я искал изображение и нашел этот Raspberry Pi 4. И нам нужно скопировать URL-адрес. Итак, нам нужно взять это, скопировать. Итак, теперь нам нужно вставить этот URL-адрес в соответствующее место на нашей веб-странице. Итак, вот Raspberry Pi 4. Чуть ниже мы можем вставить URL-адрес. Но что? Он просто дает нам URL-адрес в данный момент. На самом деле это не дает нам изображения. Поэтому нам нужно использовать тег img.

290.1

Так рис. И мы также— мы должны сказать ему, откуда взялся источник. Итак – и тогда равняется.

303.7

И тогда нужно исходник брать в кавычки.

310

И нам нужно убрать этот ярлык. Итак, теперь мы видим, что у нас есть образ Raspberry Pi, но он огромен. Поэтому нам нужно сделать его немного больше подходящего размера для нашей веб-страницы. Поэтому нам нужно добавить сюда некоторые атрибуты ширины и высоты. Итак, займемся шириной. Скажем, 200. И тогда у нас также может быть атрибут высоты, который, скажем, также равен 200.

346.1

Теперь мы видим, что у нас есть Raspberry Pi 4 действительно подходящего размера для нашей веб-страницы. Теперь пришло время попробовать. Попробуйте изменить внешний вид своей веб-страницы с помощью этих тегов и поделитесь ссылкой на свою безделушку в разделе комментариев. Если вы застряли, обязательно задавайте вопросы и помогайте друг другу. Я с нетерпением жду, чтобы увидеть, что вы создаете.

В этой статье вы узнаете об основной структуре веб-страницы и увидите больше тегов, которые можно использовать на странице фан-клуба Raspberry Pi.

Сравните приведенную ниже базовую структуру HTML со своей веб-страницей фан-клуба Raspberry Pi:

 

<голова>
Название страницы


<тело>
 Это заголовок 
Это абзац.

Любая информация в тегах скрыта и используется браузерами и поисковыми роботами; это известно как метаданные. Также обратите внимание, что некоторые теги вложены в другие теги; в приведенном ниже примере </code> вложен внутри <code><head> </code> и <code><head> </code> вложен внутри <code><html> </code> . На изображении ниже показано, как элементы могут существовать внутри других элементов:</p><p></p><p></p><p></p><p> В таблице ниже описаны теги, которые использовались в приведенной выше базовой структуре HTML:</p><p></p><p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td> <!DOCTYPE></td><td> Это объявление для отображения типа документа; это помогает веб-браузеру правильно отображать веб-страницу</td></tr><tr><td> <название> </название></td><td> Определяет заголовок веб-страницы, который будет отображаться на вкладке веб-браузера</td></tr><tr><td><html></html></td><td> Показывает начало и конец файла HTML</td></tr><tr><td> <голова> </голова></td><td> Это дает информацию о файле (метаданные)</td></tr><tr><td> <тело> </тело></td><td> Определяет основной корпус; все, что находится внутри тегов body, отображается на веб-странице</td></tr><tr><td><h2></h2></td><td> Определяет заголовок; Теги от<h2><span class="ez-toc-section" id="i-2"> до </span></h2><h6><span class="ez-toc-section" id="i-3"> используются для заголовков разного размера, где </span></h6><h2><span class="ez-toc-section" id="i-4"> самый большой, а </span></h2><h6><span class="ez-toc-section" id="i-5"> самый маленький </span></h6></td></tr><tr><td><p></p></td><td> Это определяет параграф</td></tr></tbody></table><p></p><h4><span class="ez-toc-section" id="i-6"> Заголовки и списки </span></h4><p></p><p> Заголовки используются для начала нового раздела, чтобы помочь читателю понять цель этой части веб-страницы.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/l/LAeB5wloEpNirYzdnb3XD6t0FscvkfJqOUWCQh/slide-9.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/l/LAeB5wloEpNirYzdnb3XD6t0FscvkfJqOUWCQh/slide-9.jpg' /></noscript></p><p></p><p> Вы используете заголовки <code><h3></h3></code> и <code><h4></h4></code> для представления различных разделов, таких как заголовок «Raspberry Pi 4», который находится внутри раздела «Фан-страница Raspberry Pi» на веб-странице фан-клуба Raspberry Pi. Думайте о <code><h3></h3></code> заголовках как о главах книги. Эти отдельные разделы также могут использовать более конкретные заголовки ( <code><h4></h4></code> тегов, затем <code><h5></h5> </code> тегов и так далее), чтобы ввести подразделы.</p><p></p><p> <strong> Измените теги заголовков на веб-странице фан-клуба Raspberry Pi, чтобы они были более полезными для читателя. </strong></p><p></p><p> Вы также можете использовать список на своей веб-странице фан-клуба Raspberry Pi, чтобы разбить абзац на ключевые моменты. Это может выделить пункты для читателя.</p><p></p><p> Чтобы создать список на вашей веб-странице, у вас есть два варианта: неупорядоченный список <code><ul> </code> , который дает маркеры, или упорядоченный список <code><ol> </code> , который дает нумерованные пункты.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/546597/slide_8.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/546597/slide_8.jpg' /></noscript> Каждый элемент в списке должен содержаться в пределах <code><li> </code> тегов:</p><p></p><pre> <ул> <li>Маркированный список</li> <li>Маркированный список</li> </ul> </pre><p></p><p> <strong> Создайте список на веб-странице фан-клуба Raspberry Pi. </strong> <br/> <strong> Добавьте <code> тегов <em> </code> для выделения курсивом и <code> <strong> </code>, чтобы выделить текст на вашей странице, чтобы выделить ключевые моменты. </strong></p><p></p><pre> <em>Выделено курсивом.</em> </pre><p></p><h4><span class="ez-toc-section" id="i-7"> Изображения и цитаты </span></h4><p></p><p> Если вы хотите показать логотип Raspberry Pi или помочь читателю понять, что вы делаете на своей странице, вы можете добавить изображение.</p><p></p><p> Тег <code> <img> </code> используется для определения элемента изображения на веб-странице. Он использует <code> src </code> атрибут для указания источника изображения — где оно хранится. Используемый ниже тег <code> <img> </code> взят с веб-страницы фан-клуба Raspberry Pi:</p><p></p><pre> <img class="lazy lazy-hidden" decoding="async" src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://sandbox.<img class="lazy lazy-hidden" decoding="async" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf2.ppt-online.org/files2/slide/j/JL8VCYxShrp32fgWuBZymqaK5HdGIQRFzcMv4w9Xej/slide-7.jpg' /><noscript><img decoding="async" src="https://sandbox.<img decoding="async" loading='lazy' src='/800/600/http/cf2.ppt-online.org/files2/slide/j/JL8VCYxShrp32fgWuBZymqaK5HdGIQRFzcMv4w9Xej/slide-7.jpg' /></noscript> trinket-shell.com/5550343ee6c144dc/raspberrypi.png"> </pre><p></p><p> В приведенном выше HTML-коде используется унифицированный указатель ресурсов (URL), чтобы указать, где хранится изображение — в данном случае на веб-сайте Trinket.</p><p></p><p> <code> <цитата> 9Теги 0078 используются, когда вы хотите привести цитату из другого источника; это полезно, когда вы хотите сделать резервную копию точки, которую вы делаете. Это создаст отступ для текста и сообщит читателю, что он отличается от остального текста.</p><p></p><p> Вы использовали много новых тегов, поэтому я собрал их в этой таблице:</p><p></p><p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td><ul></ul></td><td> Определяет неупорядоченный список, отображаемый в виде маркированного списка</td></tr><tr><td> <ол> </ол></td><td> Определяет упорядоченный список, отображаемый в виде нумерованного списка</td></tr><tr><td><li></li></td><td> Определяет точку списка</td></tr><tr><td> <блочная цитата> </блочная цитата></td><td> Определяет раздел, цитируемый из другого источника</td></tr><tr><td> <img></td><td> Определяет изображение; использует атрибут <code> src </code> внутри тега, чтобы указать источник изображения</td></tr></tbody></table><p></p><p> <strong> Добавьте соответствующее изображение на свою веб-страницу фан-клуба Raspberry Pi, добавив элемент <code> <img> </code>, как показано в примере HTML выше.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/z/zrsNHPneUg3L6AJWZ795XaI1woqCOkSdcvyjtE/slide-27.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/z/zrsNHPneUg3L6AJWZ795XaI1woqCOkSdcvyjtE/slide-27.jpg' /></noscript> </strong></p><p></p><p> Вот URL-адреса трех изображений, которые можно использовать для замены URL-адреса в приведенном выше примере:</p><p></p><p></p><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi2.png</li></ul></li></ul><p></p><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi3.png</li></ul></li></ul><p></p><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi4.png</li></ul></li></ul><p></p><p></p><p> <strong> Используйте <code><blockquote> </code> на своей веб-странице фан-клуба Raspberry Pi. </strong></p><h4><span class="ez-toc-section" id="i-8"> Поделитесь своей веб-страницей </span></h4><ol><li> Сохраните свою веб-страницу фан-клуба Raspberry Pi.</li><li> На своей безделушке нажмите «Поделиться».</li><li> Нажмите «Ссылка».</li><li> Скопируйте ссылку.</li><li> Вставьте ссылку в комментарии ниже для своих сокурсников.</li></ol><p></p><p> Посмотрите на другие созданные веб-страницы и сравните их со своей.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/7/7M54zoTrJnHQK9fUxjYyZt8cFARIGqwuhE2CNS/slide-6.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/7/7M54zoTrJnHQK9fUxjYyZt8cFARIGqwuhE2CNS/slide-6.jpg' /></noscript> Есть ли что-то, что вы можете взять с веб-страниц других учащихся, чтобы улучшить свою?</p><h2><span class="ez-toc-section" id="_HTML-3"> Структура HTML – Инженерно-технические услуги </span></h2><p><h3><span class="ez-toc-section" id="i-9"> Обзор </span></h3></p><p> Файлы HTML (HyperText Markup Language) — это, по сути, простые текстовые файлы, которые можно создать в любом текстовом редакторе. Но для корректного отображения во всемирной паутине HTML-документ должен быть правильно структурирован. Любое отклонение от этой структуры приведет к тому, что многие веб-браузеры будут отображать содержимое неправильно или вообще не отображать. Кроме того, все HTML-документы должны иметь суффикс «html», чтобы HTML-код правильно отображался веб-браузером.</p><p> Нормотворческий орган Сети, люди, которые определяют эту структуру, — это Консорциум Всемирной паутины (W3C). Веб-браузеры должны максимально точно следовать этим стандартам. По большей части все они работают хорошо, но некоторые браузеры не достигают этой цели (Internet Explorer является худшим виновником). Тем не менее, при создании веб-страницы лучше всего следовать текущим веб-стандартам.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cf.ppt-online.org/files/slide/w/WQcMY37iu1SC6EKN50oeqyjR9w2hmxZPfJnAlD/slide-3.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/w/WQcMY37iu1SC6EKN50oeqyjR9w2hmxZPfJnAlD/slide-3.jpg' /></noscript> Это обеспечит просмотр вашего сайта в как можно большем количестве браузеров. Все HTML-инструкции на этом сайте ETS соответствуют стандартам W3C.</p><p><h3><span class="ez-toc-section" id="i-10"> Пример </span></h3></p><p data-readability-styled="true"> <code> <!DOCTYPE HTML> <br/><html> <br/><head> <br/><meta charset=utf-8"> <br/><title>Простой пример HTML

`Это заголовок`

 
Это абзац, центрированный на странице.
 
А это второй абзац, выделенный жирным шрифтом.

Этот код создает страницу, которая выглядит следующим образом:

В приведенном выше примере вы можете увидеть использование тегов, которые являются неотъемлемой частью HTML-документа. Тег HTML состоит из левой угловой скобки (<), имени тега (например, «h2») и правой угловой скобки (>). Теги обычно парные, так что у вас есть тег в начале и в конце раздела документа (

и 9Например, 0180 . ) Все конечные теги выглядят так же, как начальный тег, за исключением косой черты (/), которая предшествует имени тега в квадратных скобках. Пара тегов определяет, где эффект тега должен начинаться и заканчиваться на странице. Текущий веб-стандарт от W3C предполагает, что все имена тегов должны быть строчными.
Атрибуты
Некоторые теги могут также включать атрибут, представляющий собой дополнительную информацию, включенную только в начальный тег. Атрибуты специфичны для каждого тега, хотя есть много общего. Некоторые теги должны иметь атрибут для правильной работы. Пример атрибута показан в теге первого абзаца, показанном в примере выше ( .) Согласно веб-стандартам все параметры атрибутов должны заключаться в кавычки. Например, это неправильно:

Закрывающие теги
Кроме того, все вложенные теги HTML должны заканчиваться в порядке, обратном их созданию. Например, это неверно:
Этот заголовок выделен жирным шрифтом и курсивом Поскольку тег был создан первым, он должен быть закрыт последним, а поскольку тег был создан последним, его необходимо закрыть первым. Все теги должны открываться и закрываться друг в друге, как набор русских матрешек.
Вот правильный пример:
Этот заголовок выделен жирным шрифтом и курсивом
Размещение тега
На веб-странице некоторые теги HTML необходимы для правильного отображения страницы. Это теги , , </strong> </code> и <code> <strong><body> </strong> </code> . Теги <code> <strong><html> </strong> </code> должны начинать и заканчивать документ, а теги <code> <strong><head> </strong> </code> должны стоять перед тегами <code> <strong><body> </strong> </code>.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/5/489560/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/5/489560/slide_5.jpg' /></noscript> Кроме того, 9Теги 0077 <strong><title> </strong> </code> должны находиться внутри тегов <code> <strong><head> </strong> </code>. Ниже приводится простое объяснение каждого из этих тегов:</p><ul><li> <code> <strong><html> </strong> </code> Этот тег и его закрывающий тег должны быть первым тегом (после Doctype) и последним тегом в вашем документе. Он сообщает браузеру, что все, что содержится в этих тегах, следует рассматривать как информацию в HTML-коде и соответственно анализировать браузером.</li><li> <code> <strong><head> </strong> </code> Этот тег и его закрывающий тег выделяют раздел вашего документа, который не будет виден на вашей веб-странице, но поможет браузеру в работе с документом. В теги <code><head> </code> можно поместить множество различных тегов, но в нашем примере выше у нас есть только обязательный тег <code><title> </code> .</li><li> <code> <strong><title> </strong> </code> Это идентификатор всего содержимого документа. Это не отображается на вашей веб-странице, но (обычно) в верхней части строки заголовка окна вашего браузера.<img class="lazy lazy-hidden" loading='lazy' src="//schtirlitz.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/17/1056026/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/17/1056026/slide_5.jpg' /></noscript></div><footer class="entry-footer"> <span class="cat-links">Категории: <a href="https://schtirlitz.ru/category/raznoe-2" rel="category tag">Разное</a></span></footer></article><nav class="navigation post-navigation" aria-label="Записи"><h2 class="screen-reader-text">Навигация по записям</h2><div class="nav-links"><div class="nav-previous"><a href="https://schtirlitz.ru/raznoe-2/skolko-vesit-minuta-video-1080p-skolko-vesit-video-snyatoe-v-8k-po-sravneniyu-s-4k-i-full-hd.html" rel="prev"><span class="be-post-nav-label btn btn-sm cont-btn no-underl"><small class="fas fa-chevron-left mr-2"></small>Назад</span></a></div><div class="nav-next"><a href="https://schtirlitz.ru/raznoe-2/kak-dobavit-podpischikov-v-soobshhestvo-v-kontakte-kak-nabrat-podpischikov-v-vk-na-stranicu-ili-pablik.html" rel="next"><span class="be-post-nav-label btn btn-sm cont-btn no-underl">Вперед<small class="fas fa-chevron-right ml-2"></small></span></a></div></div></nav><div id="comments" class="comments-area"> <a href="#" class="btn btn-primary btn-sm be-open-comment-form">Оставить комментарий</a><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/raznoe-2/html-struktura-bazovaya-struktura-html-dokumenta-s-obyasneniem-kazhdoj-strochki-xabr.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://schtirlitz.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form" novalidate><p class="comment-notes"><span id="email-notes">Ваш адрес email не будет опубликован.</span> <span class="required-field-message">Обязательные поля помечены <span class="required">*</span></span></p><p class="comment-form-comment"><label for="comment">Комментарий <span class="required">*</span></label><textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required></textarea></p><p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" autocomplete="name" required /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200" autocomplete="url" /></p><p class="form-submit"><input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий" /> <input type='hidden' name='comment_post_ID' value='52272' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></div></main></div></div></div><footer id="colophon" class="site-footer row"><div class="site-info col-md-8"><p>© 2019 Штирлиц Сеть печатных салонов в Перми</p><p>Цифровая печать, цветное и черно-белое копирование документов, сканирование документов, ризография в Перми.</p></div><div class="col-md-4"> <a href="/sitemap.xml">Карта сайта</a></div></footer></div></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://schtirlitz.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>  <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>