Html как вывести html код: Как отобразить HTML-код на HTML-странице — Вебджем.рф

Содержание

Как отобразить код html на странице

Как отобразить теги на веб-странице?

Любые теги никак не показываются в окне браузера, поскольку воспринимаются браузером как команды для вставки элементов и изменения их свойств. Но иногда требуется на веб-странице вывести теги, например, для демонстрации HTML-кода. В этом случае используйте спецсимволы < и > для замены угловых скобок < и > . При этом тег <p> будет выглядеть как <p> (пример 1)

Пример 1. Теги на странице

HTML5 CSS 2.1 IE Cr Op Sa Fx

В данном примере выводится код веб-страницы, а чтобы браузер не воспринимал теги напрямую, скобки < и > заменены специальными символами < и > . Результат примера показан на рис. 1.

Как вывести символы и теги html на странице сайта

Браузеры интерпретируют html-теги в свой синтаксис. В итоге любой html-тег при написании его в виде <тег> не отображается на странице, так как мы видим его в коде. Рассмотрим все способы как можно выводить теги html на странице сайта так, как они написаны в коде.

Существует три способа. Каждый из них не идеален. Я пользуюсь первым.

Замена левой и правой скобки на коды < и >

Чем характеризуется любой html-тег? Наличием открывающей и закрывающий скобки: < и >. Если мы будем писать эти скобки с помощью html-кодов, то добьемся как раз нужного нам результата, а точнее, что браузер поймет этот код, как простой текст.

Например, мы хотим вывести следующий html-код на странице сайта:

Для этого заменяем

< на <
> на >

Заменять каждую знак муторно и долго. Поэтому проще всего определиться сразу какой код нужно вывести, а потом массово сделать замену. Это делается с помощью любого блокнота (например, notepad++). Открыв код в блокноте, нажмите комбинацию «CTRL + H» (заменить). Заполните поля что заменить и чем. Таким образом, можно автоматом массово заменить все нужные символы на другие.

В интернете есть специальные онлайн генераторы для замены.

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

Используя теги <xmp> и <plaintext>

В html есть специальные теги для отображения кода как есть: <xmp> . </xmp> и <plaintext> . </plaintext> . Весь html-код нужно поместить как есть между открывающим и закрывающим тегами и все.

В целом этот метод работает во всех браузерах. Однако этот код не проходит валидацию.

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

Пример с <plaintext>

Из этих двух тегов, советую выбирать <plaintext> , т.к. он более новый и есть шансы пройти валидность кода.

Как посмотреть код страницы сайта | HTML

Я предпочитаю браузер Mozilla Firefox, именно с него сделанные скриншоты будут показаны ниже. В других браузерах есть похожие инструменты преимущественно с теми же горячими клавишами клавиатуры (см. комментарии ниже).

Горячие клавиши <Ctrl>+<Shift>+<C> или <F12>

Навести курсором мышки на интересующий элемент.
Нажать правую кнопку мышки — «Исследовать элемент».
Открывается такой вот помощник для разработчиков. Теперь остаётся только нажать на ссылку адреса background

Горячие клавиши <Ctrl>+<U>

Как открыть полный исходный код страницы

Нажать сочетание горячих клавиш, озвученных выше, либо, наведя на пустое место сайта и не выделяя какого-либо элемента, вызвать контекстное меню — «Исходный код страницы».
Ввести в адресную Пример:

Как искать информацию в исходном коде: <Ctrl>+<F>

Горячими клавишами <Ctrl>+<F> выводится поле поиска, куда можно ввести любой текст.

Как открыть часть HTML сайта

Выделить интересующий элемент.
Нажать правую кнопку мышки — «Исходный код выделенного элемента».

Самое интересное, что я использую все эти методы анализа страницы, а не только <Ctrl>+<Shift>+<C> .

Серверные скрипты, такие как PHP, увидеть не удастся.

7 комментариев:

Иван Десятый Сурьезное дело NMitra Один из самых часто задаваемых вопросов Ирина Иванова Оля-я, я за тобой не успеваю! У тебя столько всяких нужностей для меня, но пока перевариваю, ты уже снова даешь очень важное! Я только успеваю в закладки складывать и плюсики ставить)))
Оля, а для особо одаренных можно в Хроме такое же сделать? NMitra Для Google Chrome:

<Ctrl>+<Shift>+<C> или http://4.bp.blogspot.com/-2EIj7WE6Zkg/U3MOBdio0CI/AAAAAAAAEbU/l2BPSXovmU0/s00/kod-elementa.png

<Ctrl>+<U> или http://1.bp.blogspot.com/-2IqqSc7LOTo/U3MOBdqx2XI/AAAAAAAAEbY/8-x8R5SDyHI/s00/kod-stranitsy. png

Посмотреть код выделенного фрагмента в отдельном окне мне не удалось. NMitra Сама такая же: несмотря на то, что закладки раскидываю по папкам их всё равно огромное множество. NMitra Для IE горячая кнопка F12 или пункт в контекстном меню «Проверить элемент» http://4.bp.blogspot.com/-zkakqbjuN7U/U3MXsQ0hqmI/AAAAAAAAEbs/P-1CfElpjjg/s00/proverit-element.png

Ирина Иванова Ага, взяла на замету)) Теперь можно дальше делать задуманное. Благодарю.

Как написать html код в виде обыкновенного текста

Текст в html

Вид текста на экране зависит только от тегов, он не зависит от пробелов и разбивки на строки.

Все элементы оформления HTML-документов разделяются на два типа: строчные и блочные.

Строчные элементы могут являться частью строки, а блочные элементы всегда занимают обособленное место на web-странице и всегда начинаются с новой строки. Естественно, блочные элементы могут включать в себя другие блочные элементы и строчные элементы. По вполне понятным причинам строчные элементы не могут включать в себя блочные элементы.

Объединение элементов web-страницы в блоки позволяет применять к ним единое оформление, осуществлять верстку. Достаточно будет изменить расположение блока, изменив один объединяющий тег. Естественно, это удобнее, чем менять расположение каждого элемента web-страницы по отдельности.

Строчные элементы обрамляются тегами <span>. </span>.

Для обрамления элементов блочного типа используется пара <div>. </div>.

Браузеры обрамляют div-блоки разрывами строки.

Блок <div> не может располагаться внутри блока <span>.

Пример

Основные теги форматирования текста

<p>. </p>	Абзац.
<h2>. </h2>	Заголовок первого уровня.
<h3>. </h3>	Заголовок второго уровня.
.
<h6>. </h6>	Заголовок шестого уровня.
<br>	Переход на новую строку.
<q>. </q>	Браузер автоматически берет текст в кавычки. Изменить вид кавычек можно стилевым свойством quotes.
<hr>	Горизонтальная разделительная линия.
<pre>. </pre>	Текст фиксированной ширины с сохранением всех пробелов и переносов.

Пример

Создайте текстовый файл, как в примере. Сохраните его с расширением html.

Двойной щелчок по его наименованию в папке запустит браузер, установленный по умолчанию, и в него уже будет загружен ваш html-документ.

Выделение в тексте

<b>. </b>	Полужирный шрифт.
<i>. </i>	Курсив.
<ins>. </ins>	Подчеркнутый текст.
<del>. </del>	Перечеркнутый текст.
<sup>. </sup>	Надстрочный текст.
<sub>. </sub>	Подстрочный текст.

Пример

Текст может быть полужирным. Текст может быть курсивом.
Текст можно зачеркнуть.
Текст может быть надстрочным . Текст может быть _{подстрочным}.

Как написать код текстом на HTML странице

Что я имею ввиду под вопросом: Как написать код текстом на HTML странице? Я хочу показать вам код изображения: , но вместо тега img вы видите, зевающего смайлика.

Как написать тег в тексте

Нужно преобразовать символы & < >, которые используются в кодировке веб-документа. Можно автоматизировать процесс благодаря форме ниже:

Компактная программа CoderHTML делает тоже самое.

Тег <pre>

Дополнительно можно применить тег <pre>. По умолчанию, любое количество пробелов идущих на HTML странице подряд показывается как один. Для преодоления этого эффекта, используется свойство white-space, символ   или тег <pre>.

Для данного тега можно задать CSS стиль (для Blogger нужно указать . post-body перед pre — подробнее как это сделать — см. скриншот ниже):

Здесь я показала значения, которые использую сама. Вы можете поменять их на свой вкус.

Тег <code>

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

Итог оформления кода текстом

После того, как был преобразован код изображения зевающего смайла и заданны стили тегу pre, я могу показать его читателю блога:

18 комментариев:

altersego 1.Для вставки кода в посты вместо CoderHTML можно еще использовать online-сервисы, я пользуюсь http://centricle.com/tools/html-entities/
2. Вы забыли упомянуть, что правка «родных» таблиц стилей — не лучшая практика, как потом искать и исправлять эти заплатки? Я обычно вставляю свои «хаки» в виде дополнительных таблиц стилей перед закрывающим тегом </head>
Но это тоже — не лучшая практика, поскольку Blogger не оптимизирует (как мне кажется?) файлы и элементы шаблона с CSS. Не исследовали ли вы этот вопрос? NMitra 1. Верно. Но я как-то привыкла уже к этому инструменту — всегда под рукой.

2. Я уже почти весь код перерыла, поэтому мне не составляет труда найти нужный фрагмент. Стили для удобства делятся на Content (общий вид), Header (заголовок), Tabs (верхнее поле меню под названием блога), Headings (элементы наподобие даты), Main (основная часть), Posts (тело статьи), Widgets (внешний вид гаджетов), Footer (нижняя часть блога). Размещайте добавленные стили по разделам.

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

Вывести html код на странице, показать, отобразить как текст

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

Кстати, делиться с читателями своим положительным или даже отрицательным опытом – это основа успешного ведения блога (и хорошие темы для статей).

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

Как вывести программный код

Итак, вы хотите дать читателям скопировать скрипт или html код, размещаете его в тело поста. Не тут-то было. Как вывести его без преобразования?

Совсем недавно для корректного вывода тегов на странице предлагалось вручную заменять знаки < и > на спецсимволы < и >.

Сегодня движок WordPress чаще всего умеет сам делать такие преобразования, но также добавляет много мусора, перековеркивает, обрезает код, делает его нечитаемым или некопируемым (было в моей теме).

Поначалу мои читатели видели коды в браузере, а скопировать не могли.

На самом деле способов красиво оформить html код, вставить его в пост с подсветкой синтаксиса несколько: без плагина и с применением wordpress плагинов для кода.

Перечислю способы, а вы пробуйте, что подойдет именно вам. Я убедилась на своем опыте, что не в каждом шаблоне теги и плагины работают одинаково. Подробнее о правильном выведении кода смотрите в учебнике HTML.

Показать html код на странице как текст. Тег <pre>

Показать html код на странице как текст, подсветить его помогают теги <pre>.

В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.

Перейдите в HTML РЕЖИМ, добавьте открывающий и закрывающий тег <pre>. В моей теме уже автоматически знаки < > преобразовались в спецсимволы < и >.

СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.

При отображении СОХРАНЯЮТСЯ все пробелы. В моем шаблоне получился следующий результат (у вас отображение может быть другим).

Как вывести html код на странице поста как текст. Тег <code>

Тег <code> также позволяет вывести одну или несколько строк программного кода. Пробелы и переносы НЕ УЧИТЫВАЮТСЯ, переносите строки тегами <p> или <br>.

Делайте все аналогично вставке тега <pre>.

Отобразить html код на странице как текст. Тег<xmp>

Если вы предлагаете читателям коды нечасто, можете использовать такую конструкцию.

Она помогает отобразить коды или скрипты в виде текста, заключенного в рамочку, С УЧЕТОМ форматирования и всех переносов.

Отображение кода получится в симпатичной рамочке. Ее ширину редактируйте, изменяя параметр width, высоту — height.

Но дело в том, что КОДЫ с использованием тега <xmp> считаются НЕВАЛИДНЫМИ.

Учебник HTML предлагает вставлять этот тег только в таком виде.

Плагины для выведения кода на страницу поста

Большинство блогеров для красивого и неизменного отображения html кодов на странице поста применяют плагины для WordPress. Опять таки, плагинов множество, но у меня корректно заработал лишь один.

Приведу список, а вы подберете плагин, работающий с вашим шаблоном.

Сладкая парочка WP-Syntax – выделяет код рамочкой, дает возможность подсветить синтаксис. Плюс wp-syntax button – выводит кнопку в админпанель блога, предоставляет возможность вставить html код или скрипт без преобразования в специальное окно.

Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.

Syntax Highlighter Compress – в текстовый редактор выводит дополнительную кнопку. Нажимаете ее, открывается окно, куда можно ввести код и выбрать язык программирования.

Так же работают и другие плагины.

Better WordPress Syntax
Wp-highlight.js
SyntaxHighlighter
Auto SyntaxHighlighter (у меня). И многие другие плагины.

Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.

Заключение

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

А какой способ применяете вы, чтобы внести теги html в обычный текст без преобразования?

Выбор, просмотр и настройка невидимых элементов в Dreamweaver

Руководство пользователя Отмена

Поиск

Руководство пользователя Dreamweaver
Введение
1. Основы гибкого веб-дизайна
2. Новые возможности Dreamweaver
3. Веб-разработка с помощью Dreamweaver: обзор
4. Dreamweaver / распространенные вопросы
5. Сочетания клавиш
6. Системные требования Dreamweaver
7. Обзор новых возможностей
Dreamweaver и Creative Cloud
1. Синхронизация настроек Dreamweaver с Creative Cloud
2. Библиотеки Creative Cloud Libraries в Dreamweaver
3. Использование файлов Photoshop в Dreamweaver
4. Работа с Adobe Animate и Dreamweaver
5. Извлечение файлов SVG, оптимизированных для Интернета, из библиотек
Рабочие среды и представления Dreamweaver
1. Рабочая среда Dreamweaver
2. Оптимизация рабочей среды Dreamweaver для визуальной разработки
3. Поиск файлов по имени или содержимому | Mac OS

Настройка сайтов
1. О сайтах Dreamweaver
2. Настройка локальной версии сайта
3. Подключение к серверу публикации
4. Настройка тестового сервера
5. Импорт и экспорт параметров сайта Dreamweaver
6. Перенос существующих веб-сайтов с удаленного сервера в корневой каталог локального сайта
7. Специальные возможности в Dreamweaver
8. Дополнительные настройки
9. Настройка установок сайта для передачи файлов
10. Задание параметров прокси-сервера в Dreamweaver
11. Синхронизация настроек Dreamweaver с Creative Cloud
12. Использование Git в Dreamweaver
Управление файлами
1. Создание и открытие файлов
2. Управление файлами и папками
3. Получение файлов с сервера и размещение их на нем
4. Возврат и извлечение файлов
5. Синхронизация файлов
6. Сравнение файлов
7. Скрытие файлов и папок на сайте Dreamweaver
8. Включение заметок разработчика для сайтов Dreamweaver
9. Предотвращение использования уязвимости Gatekeeper
Макет и оформление
1. Использование средств визуализации для создания макета
2. Об использовании CSS для создания макета страницы
3. Создание динамичных веб-сайтов с помощью Bootstrap
4. Создание и использование медиазапросов в Dreamweaver
5. Представление содержимого в таблицах
6. Цвета
7. Гибкий дизайн с использованием «резиновых» макетов
8. Extract в Dreamweaver
CSS
1. Общие сведения о каскадных таблицах стилей
2. Создание макетов страниц с помощью конструктора CSS
3. Использование препроцессоров CSS в Dreamweaver
4. Установка настроек стиля CSS в Dreamweaver
5. Перемещение правил CSS в Dreamweaver
6. Преобразование встроенного CSS в правило CSS в Dreamweaver
7. Работа с тегами div
8. Применение градиентов к фону
9. Создание и редактирование эффектов перехода CSS3 в Dreamweaver
10. Форматирование кода
Содержимое страницы и ресурсы
1. Задание свойств страницы
2. Задание свойств заголовка CSS и свойств ссылки CSS
3. Работа с текстом
4. Поиск и замена текста, тегов и атрибутов
5. Панель DOM
6. Редактирование в режиме интерактивного просмотра
7. Кодировка документов в Dreamweaver
8. Выбор и просмотр элементов в окне документа
9. Задание свойств текста в инспекторе свойств
10. Проверка орфографии на веб-странице
11. Использование горизонтальных линеек в Dreamweaver
12. Добавление и изменение сочетаний шрифтов в Adobe Dreamweaver
13. Работа с ресурсами
14. Вставка и обновление даты в Dreamweaver
15. Создание и управление избранными ресурсами в Dreamweaver
16. Вставка и редактирование изображений в Dreamweaver
17. Добавление мультимедийных объектов
18. Добавление видео Dreamweaver
19. Добавление видео HTML5
20. Вставка файлов SWF
21. Добавление звуковых эффектов
22. Добавление аудио HTML5 в Dreamweaver
23. Работа с элементами библиотеки
24. Использование текста на арабском языке и иврите в Dreamweaver
Создание ссылок и навигация
1. О создании ссылок и навигации
2. Создание ссылок
3. Карты ссылок
4. Устранение неполадок со ссылками
Графические элементы и эффекты jQuery
1. Использование пользовательского интерфейса и графических элементов jQuery для мобильных устройств в Dreamweaver
2. Использование эффектов jQuery в Dreamweaver
Написание кода веб-сайтов
1. О программировании в Dreamweaver
2. Среда написания кода в Dreamweaver
3. Настройка параметров написания кода
4. Настройка цветового оформления кода
5. Написание и редактирование кода
6. Подсказки по коду и автозавершение кода
7. Свертывание и развертывание кода
8. Повторное использование фрагментов кода
9. Анализ Linting для проверки кода
10. Оптимизация кода
11. Редактирование кода в представлении «Дизайн»
12. Работа с содержимым заголовков для страниц
13. Вставка серверных включений в Dreamweaver
14. Использование библиотек тегов в Dreamweaver
15. Импорт пользовательских тегов в Dreamweaver
16. Использование вариантов поведения JavaScript (общие инструкции)
17. Применение встроенных вариантов поведения JavaScript
18. Сведения об XML и XSLT
19. Выполнение XSL-преобразования на стороне сервера в Dreamweaver
20. Выполнение XSL-преобразования на стороне клиента в Dreamweaver
21. Добавление символьных сущностей для XSLT в Dreamweaver
22. Форматирование кода
Процессы взаимодействия продуктов
1. Установка и использование расширений в Dreamweaver
2. Обновления в Dreamweaver, устанавливаемые через приложение
3. Вставить документы Microsoft Office в Dreamweaver (только для Windows)
4. Работа с Fireworks и Dreamweaver
5. Редактирование содержимого на сайтах Dreamweaver с помощью Contribute
6. Интеграция Dreamweaver с Business Catalyst
7. Создание персонализированных кампаний почтовой рассылки
Шаблоны
1. О шаблонах Dreamweaver
2. Распознавание шаблонов и документов на их основе
3. Создание шаблона Dreamweaver
4. Создание редактируемых областей в шаблонах
5. Создание повторяющихся областей и таблиц в Dreamweaver
6. Использование дополнительных областей в шаблонах
7. Определение редактируемых атрибутов тега в Dreamweaver
8. Создание вложенных шаблонов в Dreamweaver
9. Редактирование, обновление и удаление шаблонов
10. Экспорт и импорт XML-содержимого в Dreamweaver
11. Применение или удаление шаблона из существующего документа
12. Редактирование содержимого в шаблонах Dreamweaver
13. Правила синтаксиса для тегов шаблона в Dreamweaver
14. Настройка предпочтений выделения для областей шаблона
15. Преимущества использования шаблонов в Dreamweaver
Мобильные и многоэкранные устройства
1. Создание медиазапросов
2. Изменение ориентации страницы для мобильных устройств
3. Создание веб-приложений для мобильных устройств с помощью Dreamweaver
Динамические сайты, страницы и веб-формы
1. Общие сведения о веб-приложениях
2. Настройка компьютера для разработки приложений
3. Устранение неполадок подключений к базам данных
4. Удаление сценариев подключения в Dreamweaver
5. Дизайн динамических страниц
6. Обзор динамических источников содержимого
7. Определение источников динамического содержимого
8. Добавление динамического содержимого на страницы
9. Изменение динамического содержимого в Dreamweaver
10. Отображение записей баз данных
11. Введение интерактивных данных и устранение неполадок с ними в Dreamweaver
12. Добавление заказных вариантов поведения сервера в Dreamweaver
13. Создание форм с помощью Dreamweaver
14. Использование форм для сбора информации от пользователей
15. Создание и включение форм ColdFusion в Dreamweaver
16. Создание веб-форм
17. Расширенная поддержка HTML5 для компонентов формы
18. Разработка формы с помощью Dreamweaver
Визуальное построение приложений
1. Создание главной страницы и страницы сведений в Dreamweaver
2. Создание страниц поиска и результатов поиска
3. Создание страницы для вставки записи
4. Создание страницы обновления записи в Dreamweaver
5. Создание страниц удаления записей в Dreamweaver
6. Применение ASP-команд для изменения базы данных в Dreamweaver
7. Создание страницы регистрации
8. Создание страницы входа
9. Создание страницы с доступом только для авторизованных пользователей
10. Защита папок в ColdFusion с помощью Dreamweaver
11. Использование компонентов ColdFusion в Dreamweaver
Тестирование, просмотр и публикация веб-сайтов
1. Предварительный просмотр страниц
2. Предварительный просмотр веб-страниц Dreamweaver на нескольких устройствах
3. Тестирование сайта Dreamweaver

Выбор и просмотр элементов в Dreamweaver, отображение или скрытие маркеров невидимых элементов и настройка установок невидимых элементов.

Чтобы выделить элемент в представлении «Дизайн» области «Окно документа», щелкните этот элемент. Если элемент невидим, для выделения его необходимо сделать видимым.

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

Dreamweaver позволяет указать, отображать ли значки расположения невидимых элементов в представлении «Дизайн» области «Окно документа». Чтобы указать, какие маркеры элементов должны отображаться, можно задать установки в разделе «Невидимые элементы». Например, можно указать отображение именованных привязок, но не разрывов строк.

Некоторые невидимые элементы (например, комментарии или именованные привязки) можно создавать и изменять с помощью диалогового окна «Настройки» > «Невидимые элементы».

Чтобы выделить видимый элемент в области «Окно документа», щелкните этот элемент или перетащите по нему указатель мыши.
Чтобы выделить невидимый элемент, в представлении «Дизайн» выберите пункт «Просмотр» > «Параметры представления «Дизайн»» > «Средства визуализации» > «Невидимые элементы» (если этот пункт еще не выбран), после чего щелкните маркер элемента в области окна документа.

Некоторые объекты отображаются на странице в месте, отличном от места вставки их кода. Например, в представлении «Дизайн» элемент с абсолютным позиционированием (элемент AP) может находиться в любом месте страницы, но в представлении «Код» расположение его кода зафиксировано. При отображении невидимых элементов в области «Окно документа» Dreamweaver отображаются маркеры, указывающие расположение кода таких элементов. При выделении маркера выделяется весь элемент; например, при выделении маркера элемента AP выделяется весь элемент AP.
Чтобы выделить весь тег (включая содержимое, при его наличии), щелкните его в селекторе тегов в левом нижнем углу области «Окно документа». (Селектор тегов отображается как в представлении «Дизайн», так и в представлении «Код». ) В селекторе тегов всегда отображаются теги, содержащие текущий выделенный фрагмент или позицию курсора. Крайний левый тег — это самый внешний тег, содержащий текущий выделенный фрагмент или позицию курсора. Следующий тег содержится в упомянутом самом внешнем теге и так далее; крайний правый тег — это самый внутренний тег, содержащий текущий выделенный фрагмент или позицию курсора.

Чтобы просмотреть связанный с текстом или объектом HTML-код, выполните одно из следующих действий.
- На панели инструментов «Документ» нажмите кнопку «Код».
- Выберите «Просмотр» > «Код».
- Выберите параметр «Просмотр» > «Разделить» > «Код-Интерактивный», «Код-Дизайн» или «Код-Код».
- Выберите «Окно» > «Инспектор кода».
  При выделении какого-либо фрагмента в одном из редакторов кода (в представлении «Код» или инспекторе кода) он обычно также выделяется и в области «Окно документа». Для отображения выделенного фрагмента может потребоваться синхронизация двух представлений.

Выберите «Просмотр» > «Параметры представления «Дизайн»» > «Средства визуализации» > «Невидимые элементы».
Отображение невидимых элементов может незначительно изменить макет страницы, переместив другие элементы на несколько пикселов, поэтому для точного позиционирования невидимые элементы следует скрыть.

В установках невидимых элементов можно указать, какие типы элементов будут видимыми при выборе пункта меню «Просмотр» > «Вспомогательные элементы» > «Невидимые элементы».

Выберите меню «Правка» > «Настройки» (Windows) или «Dreamweaver» > «Настройки» (Macintosh), после чего выберите вкладку «Невидимые элементы».
Выберите, какие элементы следует сделать видимыми, и нажмите кнопку «ОК».
Флажок возле названия элемента в диалоговом окне означает, что при выборе пункта меню «Просмотр» > «Вспомогательные элементы» > «Невидимые элементы» этот элемент будет видимым.
Именованные привязки
Отображает значок, обозначающий расположение каждой из именованных привязок (a name = «») в документе.
Сценарии
Отображает значок, обозначающий расположение кода JavaScript или VBScript в теле документа. Выделив значок, можно изменить сценарий в инспекторе свойств или указать ссылку на внешний файл сценария.
Комментарии
Отображает значок, обозначающий расположение HTML-комментариев. Выделив значок, можно просмотреть комментарий в инспекторе свойств.
Разрывы строк
Отображает значок, обозначающий расположение каждого из разрывов строк (BR). По умолчанию этот параметр не выбран.
Клиентские карты ссылок
Отображает значок, обозначающий расположение каждой из клиентских карт ссылок в документе.
Внедренные стили
Отображает значок, показывающий расположение CSS-стилей, внедренных в тело документа (в секцию body). Если CSS-стили расположены в заголовке документа (в секции head), в области «Окно документа» они не отображаются.
Скрытые поля формы
Отображает значок, обозначающий расположение полей форм с атрибутом type, имеющим значение «hidden».
Разделитель форм
Отображает рамку вокруг формы, которая показывает, где вставляются элементы формы. Рамка охватывает пределы тега form, так что все элементы формы в этой рамке правильно заключены в теги form.
Опорные точки для элементов AP
Отображает значок, который обозначает расположение кода, определяющего элемент с абсолютным позиционированием (элемент AP). Сам элемент AP может быть расположен в любом месте страницы. (Элементы AP не являются невидимыми; невидим только код, определяющий их.) Выделив значок, можно выделить элемент AP; затем можно просмотреть его содержимое, даже если элемент обозначен как скрытый.
Опорные точки для выровненных элементов
Отображает значок, показывающий расположение HTML-кода элементов, которые принимают атрибут align. К ним относятся изображения, таблицы, объекты ActiveX, подключаемые модули и апплеты. В некоторых случаях код элемента может быть отделен от видимого объекта.
Отображаемые серверные теги разметки
Отображает расположение серверных тегов разметки (например, ASP или ColdFusion), содержимое которых невозможно отобразить в области «Окно документа». Эти теги обычно создают теги HTML при обработке сервером. Например, тег <CFGRAPH> создает таблицу HTML при обработке сервером ColdFusion. В Dreamweaver этот тег представляется с помощью невидимого элемента ColdFusion, поскольку приложение Dreamweaver не может определить окончательные, динамические выходные данные страницы.
Неотображаемые серверные теги разметки
Отображает расположение серверных тегов разметки (например, ASP или ColdFusion), содержимое которых невозможно отобразить в области «Окно документа». Эти теги обычно представляют собой теги настройки, обработки или логические теги (например, <CFSET>, <CFWDDX> и <CFXML>), которые не создают теги HTML.
Отображение CSS: Нет
Отображает значок, показывающий расположение содержимого, скрытого свойством display:none в связанной или внедренной таблице стилей.
Показывать динамический текст в виде
Отображает любой динамический текст на странице в формате {Набор_записей:Поле} по умолчанию. Если длина этих значений достаточно велика для искажения форматирования страницы, можно изменить формат отображения на {}.
SSI
Отображает текущее содержимое каждого файла SSI.

Справки по другим продуктам

Просмотр кода
Использование панели «Вставка»

Вход в учетную запись

Войти

Управление учетной записью

Основные элементы HTML веб-страницы | Введение в веб-разработку.

Курс

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

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

Любой html-документ должен начинаться с одиночного тега <!DOCTYPE> с атрибутом, указывающем на используемую версию языка HTML. В случае с HTML5 первая строка будет такой:

<!DOCTYPE html>

Далее идет открывающий тег <html>. Его закрывающий тег </html> должен находиться в самом конце кода страницы. Пара <html>...</html> формирует корневой элемент документа. Все содержимое страницы находится между этими тегами.

В теге <html> следует добавлять атрибут lang, которому присваивается обозначение языка, на котором представлено смысловое содержание страницы. Например, <html lang="ru"> или <html lang="en">. Это помогает браузерам и поисковым системам правильно работать со страницей.

После <html> идет элемент head, содержимое которого не отображается на странице. В head содержится метаинформация (информация об информации на странице), к документу подключаются другие файлы, могут быть включения кодов CSS и JS. Ниже описаны элементы HTML, которые настоятельно рекомендуется включать в head страниц сайтов, размещаемых в Web. Однако в курсе большинство из них мы будем опускать.

Содержимое элемента title выводится в браузере на вкладке окна, в котором открывается документ. Обычно здесь дублируют и дополняют заголовок страницы.

Кодировка документа указывается с помощью тега <meta> через атрибут charset. В настоящее время обычно при создании html-документов используют UTF-8.

Следующая команда позволяет корректно отображать видимое содержимое страницы на небольших экранах (смартфонах): <meta name="viewport" content="width=device-width, initial-scale=1">.

Краткое описание содержимого страницы (<meta name="description" content="…">) может быть использовано в поисковой выдаче. Например, человек вводит поисковый запрос в поисковой строке. Поисковик формирует поисковую выдачу, ранжируя (выставляя по очереди) ответы согласно своему алгоритму. Информация под ссылкой на ресурс может быть взята из краткого описания страницы (хотя не обязательно).

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

После элемента head начинается то, что будет отображаться в окне браузера, то есть «тело» документа. Начинается оно с открывающего тега <body>, закрывающий тег которого находится непосредственно перед закрывающим тегом корневого элемента. Другими словами, конец кода html-документа обычно выглядит так: </body></html>.

Весь содержательный контент страницы заключается между тегами <body> и </body>.

Что из себя представляет контент страницы? Чаще всего это текст. Мы разделяем его на абзацы. Если статья длинная, то у нее, кроме заголовка, могут быть разделы, у каждого из которых может быть свой подзаголовок.

В HTML для разметки абзаца используется элемент p, для заголовка первого уровня (самого главного) – h2.

Кроме текста нередко в веб-контент включают различные изображения. Для этого используется одиночный тег <img>. Обязательным атрибутом является src (сокращение от слова source – источник), с помощью которого указывается адрес, где находится файл. Также рекомендуется прописывать атрибуты width и height – ширина и высота картинки, alt – для описывающей изображение информации. Значение alt может использоваться поисковыми системами в поиске по картинкам, а также отображается в браузере, если по каким-то причинам изображение не загрузилось.

Ширина и высота картинки измеряется в пикселях. Узнать размеры находящегося на вашем компьютере изображения можно через окно «Свойства», которое вызывается через контекстное меню (правый клик по файлу картинки). Чтобы узнать размер изображения, размещенного на веб-странице, можно в контекстном меню выбрать пункт «Открыть картинку в новой вкладке» (или подобный). В титуле страницы, помимо имени файла, будет указан размер.

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

Ссылки – важная составляющая веба. Недаром говорят о всемирной паутине (World Wide Web), связь между документами в которой обеспечивают как раз ссылки (гиперссылки). В языке HTML они создаются с помощью элемента a. У открывающего тега должен быть атрибут href. Обычно его значением является адрес другого документа. Между тегами <a> и </a> записывается текст ссылки, который видит читатель страницы. При клике по этому тексту происходит переход к другому документу (он загружается в окно браузера). В адресной строке при этом меняется адрес.

Нередким элементом страницы являются списки. Они бывают неупорядоченные и упорядоченные. Первые определяются элементом ul, вторые – ol. Каждый пункт и того и другого списка формирует контейнер <li></li>.

Чтобы придать значимости какой-либо фразе или термину их помещают в контейнер <strong></strong> («важный, ключевой текст») или <em></em> («обратить особое внимание», «сделать акцент»). Первый выглядит жирным, второй – курсивом.

Strong и em – структурные элементы; они имеют значение для поисковых систем. С их помощью придают больший вес заключенным в них словам. Если же нужно просто выделить текст жирным или курсивом для красоты, наглядности, понятности можно использовать теги оформления <b></b> и <i></i>, пришедшие из более ранних версий HTML.

Следует отметить, с помощью языка CSS элементы b и strong, i и em можно сделать визуально отличимыми. Например, задать для b темно-синий цвет шрифта, а em дополнительно к курсиву придать жирность начертания.

Существует множество различных элементов HTML. Информацию о них можно найти во многих источниках. О некоторых тегах будет рассказано позже по ходу курса.

Еще раз обратим внимание на терминологию. Элементы HTML создаются с помощью тегов. У открывающих и одиночных тегов могут быть атрибуты. Атрибутам через знак равенства присваиваются значения. Значения берутся в кавычки. Атрибуты пишутся после имени тега, но последовательность между самими атрибутами, если их несколько, не важна. Атрибуты можно представить как своего рода «настройщики» элемента. Набор допустимых атрибутов разных тегов может отличаться, однако существуют общие, то есть употребимые с большинством тегов.

В программировании, в том числе декларативном, куда можно отнести верстку веб-страниц, используют комментарии. Их назначение – пояснять работу кода для изучающего программу человека. Комментарии никак не сказываются на выполнении программ. При разработке бывает с их помощью «выключают» часть кода, чтобы сконцентрироваться на другой части или при тестировании разных вариантов. В HTML комментарии записываются так:

<!-- здесь текст комментария -->

Как вывести html код в php

Как вывести HTML внутри PHP

Admin 15.03.2017 , обновлено: 14.09.2017 PHP, WordPress

В процессе работы над созданием или редактированием сайтов часто возникает необходимость вывести информацию внутри PHP кода. Разберем варианты вывода HTML внутри PHP.

Как вывести html между двумя другими PHP кодами

Чтобы вывести html между двумя PHP кодами нужна следующая конструкция:

<?php любой php код

Альтернативный вывод HTML внутри PHP

Как вывести PHP внутри функции

Следующая конструкция позволяет положить любой html и php код внутрь описываемой функции:

Синтаксис PHP

Наверняка ты знаком с принципом работы радиоуправляемых машинок. Нажимаешь вперёд — машинка едет, нажимаешь влево — машинка меняет направление колёс.

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

Что такое PHP скрипт

PHP-скрипт — это обычный текстовый файлик с расширением .php . Точно такой же, как html и css.

Но есть одно важное отличие:

Скрипты запускаются только через http-запросы в браузере. Это значит, что для запуска скрипта script.php необходимо в адресной строке браузера написать site.ru/script.php

Если скрипт не работает — проверь текущий URL. Если там будет что-то вроде file:///D:/openserver/domains/site.ru/script.php — это значит, что ты пытаешься не перейти на страницу сайта, а открыть сам PHP файлик в браузере. Это неправильно.

Веб-серверы чаще всего настроены так, что при заходе на главную страницу (например site.ru ) автоматически запускается файл index.php или index.html, лежащий в корне сайта.

Создай в корневой папке сайта файл с названием index.php и открой его в своём текстовом редакторе. При наличии файла index.html его нужно удалить.

Если у тебя пока нет текстового редактора — рекомендую лёгкий и бесплатный Notepad++, он гораздо удобней встроенного в Windows блокнота.

Обязательно следи за кодировкой скриптов. Кодировка должна быть либо UTF-8 без BOM (если такая доступна в твоём редакторе), либо просто UTF-8.

Вывод чисел и строк в PHP

Команды PHP пишутся между тегами <?php и ?> , например:

Команда echo отвечает за вывод информации на экран. После оператора указывается значение, которое нужно вывести.

Чтобы вывести текст, его нужно указать в одинарных или двойных кавычках:

Команды в PHP разделяются точкой с запятой. Для удобства чтения каждую команду принято писать с новой строки:

Результат в браузере:

Вывод HTML кода в PHP

HTML-код можно перемешивать с командами PHP:

Также HTML код можно подставить в PHPшную строку:

Результат в браузере:

Мы можем как угодно совмещать PHP код и HTML теги:

Функции в PHP

Функция — это команда, которая выполняет какие-либо действия, например расчёты, управление файлами и т.д.

Определить функцию просто — у неё после названия идут круглые скобки:

Функция phpinfo() выводит на экран информацию с текущими настройками PHP.

Некоторые функции ожидают, что им передадут какое-нибудь значение. Например, функция округления ceil() ожидает число, которое она округлит:

Функция ceil() получает переданное нами значение 91.5 , обрабатывает его (округляет до 92) и возвращает результат. А команда echo получает возвращённое функцией значение и выводит его на экран. Результатом работы этого скрипта будет 92 .

Функции будут подробно рассмотрены в отдельном уроке.

Необходимость закрывающего тега в PHP

Если после PHP команд нет HTML или любого другого вывода на экран, то мы можем не использовать закрывающий тег ?> :

Сокращённый синтаксис открывающего тега в PHP

Вместо <?php echo вы можете написать просто <?= . Полезно для тех случаев, когда нам нужно подставить значение между HTML тегами, например:

Кроме этого, мы можем заменить тег <?php на более короткую версию <? :

Использование тега <? вызывало множество споров в среде PHP разработчиков. Точку в этом вопросе поставили создатели языка PHP: начиная с PHP 7.4 короткий тег объявлен устаревшим, а в PHP 8 его уже не будет.

По этой причине я не рекомендую использовать короткий тег <? .

Это не относится к тегу <?= , его можно спокойно использовать в своих проектах.

Комментарии в PHP

Однострочные комментарии в PHP пишутся после символа # или // и действуют до конца строки:

Многострочные комментарии размещаются между /* и */ :

Обратите внимание, многострочные комментарии нельзя вкладывать друг в друга:

Итого

PHP скрипт — это текстовый файл с расширением .php, в котором между тегами <?php и ?> указываются команды PHP.

Важно следить за кодировкой скриптов и выбирать либо UTF-8 без BOM, либо просто UTF-8.

Для вывода каких-либо значений в браузер используется команда echo, либо сокращённый синтаксис <?= :

Если после PHP-кода нет никакого вывода, закрывающий тег ?> можно опустить.

Echo или вывод HTML средствами PHP: разбор, примеры

Новичок ли вы в PHP программировании или продвинутый специалист — вам известно, что одно из первых с чем сталкиваются разработчики PHP это команда вывода HTML — echo. Это одна из основных команд языка программирования PHP. Она позволяет вывести любой HTML и jаvascript или другой код средствами PHP.

Для более опытных программистов добавлю, что echo с использованием циклов позволяет формировать HTML контент, а именно — таблицы, списки новостей, различные списки, меню и т.п. То есть echo имеет очень широкое применение в PHP.

То что нужно вывести при помощи конструкции echo мы заключаем в кавычки (одинарные или двойные), если это строка или указываем переменную.

Рассмотрим простейшие пример и выведем HTML строку на экран:

Добавим переменную PHP, заранее обозначив ее:

Обращаю внимание на то как соединяются строки в PHP, только через точки (вместо + как во многих других языках программирования). Именно здесь часто допускают ошибки новички в PHP при использовании команды вывода HTML — echo.

При использовании двойных кавычек можно писать переменную PHP не используя соединение строк:

При использовании одинарных кавычек вместо цифры 7 на страницу выводится — $tonn.

Добавим экранирование символов для вывода кавычек в HTML строке:

Выведем при помощи echo массив.

Используем краткую форму функции echo

Если краткий вывод у вас не работает, то возможной проблемой является настройка PHP в файле php.ini.

Добавим несколько строк для вывода HTML при помощи echo:

Используем echo <<<END:

Открывающий и закрывающий идентификаторы должны располагаться на отдельных строках, пробелов быть не должно!

Добавим цикл, который позволит при помощи echo нам сформировать данные на странице, например список.

А теперь давайте сформируем простую шапку сайта с переменными для заголовка и описания, подвал сайта и основную часть и выведем этот HTML код при помощи PHP команды echo.

Как отобразить код html на странице

Не редко, для демонстрации какого то HTML кода, необходимо вывести его на странице, но выводя его “как есть” , пользователь кода не увидит – браузер его преобразует как код HTML, ну это и логично.

Самым простым и эффективным способом отображения HTML кода на странице является замена специальных символов на их сущности (мнемоники):

Пользователь увидит обычный HTML код, но, на самом деле спецсимволы будут заменены мнемониками.

Сделать это можно вручную, но если данный процесс нужно будет делать очень часто, то лучше его автоматизировать, например в PHP есть специальная функция для этого – htmlspecialchars() .

Пример 1. Теги на странице

HTML5 CSS 2.1 IE Cr Op Sa Fx

Кстати, делиться с читателями своим положительным или даже отрицательным опытом – это основа успешного ведения блога (и хорошие темы для статей).

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

Поначалу мои читатели видели коды в браузере, а скопировать не могли.

Показать html код на странице как текст. Тег <pre>

Показать html код на странице как текст, подсветить его помогают теги <pre>.

В ВИЗУАЛЬНОМ РЕДАКТОРЕ пропишите код.

СОХРАНИТЕ. В визуальный режим больше НЕ переключайтесь, иначе изменения пропадут.

Как вывести html код на странице поста как текст. Тег <code>

Делайте все аналогично вставке тега <pre>.

Отобразить html код на странице как текст. Тег<xmp>

Если вы предлагаете читателям коды нечасто, можете использовать такую конструкцию.

Отображение кода получится в симпатичной рамочке. Ее ширину редактируйте, изменяя параметр width, высоту — height.

Но дело в том, что КОДЫ с использованием тега <xmp> считаются НЕВАЛИДНЫМИ.

Учебник HTML предлагает вставлять этот тег только в таком виде.

Плагины для выведения кода на страницу поста

Приведу список, а вы подберете плагин, работающий с вашим шаблоном.

Недостаток – все действия производятся в html режиме, переключаться в визуальный режим нельзя, иначе все изменения исчезнут.

Так же работают и другие плагины.

Better WordPress Syntax
Wp-highlight.js
SyntaxHighlighter
Auto SyntaxHighlighter (у меня). И многие другие плагины.

Мне пришлось устанавливать и активировать все по-очереди, пока не нашла тот, который работает в моем шаблоне.

Заключение

А какой способ применяете вы, чтобы внести теги html в обычный текст без преобразования?

У меня есть HTML-код, завернутый в тег div, который я хотел бы разместить на главной странице.

Поскольку я использую статическую страницу для главной страницы, я предполагаю, что я должен использовать is_front_page (), и я должен поместить нужный код в footer.php

Это то, что у меня теперь есть в footer.php (просто фрагмент, который нам нужен):

What am I doing wrong here? Should I use echo in the php? Or should I use an OR statement in the IF (is_home OR is_front_page)

Как отображать теги HTML как обычный текст в HTML?

Посмотреть обсуждение

Улучшить статью

Сохранить статью

Последнее обновление: 20 сент, 2021

Читать

Обсудить

Посмотреть обсуждение

Улучшить статью

Сохранить статью

По сути, существует два метода отображения тегов HTML в виде обычного текста.

1. Использование элемента

: </strong> Элемент простого текста устарел, что означает, что эта функция больше не поддерживается. Хотя некоторые браузеры могут по-прежнему поддерживать его, использовать его не рекомендуется.</p><p> <strong> 2. Объекты HTML: </strong> Второй и единственный доступный вариант — использование объектов HTML. < ,> — это зарезервированные символы в HTML. Чтобы отобразить эти зарезервированные символы, вы должны заменить их объектами html. Вы можете узнать больше о сущностях здесь. Вы можете использовать имя объекта или номер объекта, инициализируя их с помощью <strong> и </strong> и заканчивая их <strong>; </strong></p><p> </p><p> См. таблицу ниже для необходимых объектов HTML:</p><table><tbody><tr><td><p> Знак</p></td><td> Описание</td><td> Название объекта</td><td> Номер объекта</td></tr><tr><td> <</td><td> Меньше чем (начало элемента html<td>8)<td>8</td><td> <</td></tr><tr><td> ></td><td> Больше, чем(конец элемента html)</td><td> ></td><td> ></td></tr><tr><td> “</td><td> Двойная кавычка</td><td> "</td><td> "</td></tr><tr><td> и</td><td> Амперсанд (начало HTML-элемента)</td><td> &</td><td> &</td></tr></tbody></table><p> <strong> Пример 1: </strong> В первом примере мы используем имена html-объектов для отображения основного элемента и элемента абзаца на веб-странице.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/geek-nose.com/wp-content/uploads/2015/06/kak-vstavit-kartinku-html-14-765x490.png' /><noscript><img loading='lazy' src='/800/600/http/geek-nose.com/wp-content/uploads/2015/06/kak-vstavit-kartinku-html-14-765x490.png' /></noscript></p><h3><span class="ez-toc-section" id="HTML"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Plain text </ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> <</code> <code> Pre </code> <code>> </code></p><p data-readability-styled="true"> <code> </code> <code> Элемент параграфа: <</code> <code> P </code> </code> <code>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/6/538306/slide_9.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/6/538306/slide_9.jpg' /></noscript> 0109 > </ </code> <code> p </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> Body element : < </code> <code> body </code> <code> > < / </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> pre </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> </ </code> <code> html </code> <code> > </code></p></td></tr></tbody></table><p> <strong> Вывод: </strong></p><p> Вывод</p><p> <strong> Объяснение: </strong> В приведенном выше коде <strong> «<» </strong> и <strong> «>» </strong> просто заменяются соответствующими html-объектами. <strong><pre></pre></strong> — это элемент html, который определяет предварительно отформатированный текст.</p><p> <strong> Пример 2: </strong> В приведенном ниже примере мы пытаемся отобразить имя объекта html для <strong> «<» </strong>, используя имя объекта для <strong> знака «&» </strong>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-VdHKO2ZKk1E/UdWRoSSdh9I/AAAAAAAAB-8/v1WQf_GlMao/s690/yoda-loves-you.png' /><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-VdHKO2ZKk1E/UdWRoSSdh9I/AAAAAAAAB-8/v1WQf_GlMao/s690/yoda-loves-you.png' /></noscript></p><h3><span class="ez-toc-section" id="HTML-2"> HTML </span></h3><table border="0" cellpadding="0" cellspacing="0"><tbody><tr><td><p data-readability-styled="true"> <code> <!DOCTYPE html> </code></p><p data-readability-styled="true"> <code> < </code> <code> html </code> <code> lang </code> <code> = </code> <code> "en" </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> </p><p data-readability-styled="true"> <code> < </code> <code> head </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> title </code> <code> >Обычный текст, демонстрация</ </code> <code> title </code> <code> > </code></p><p data-readability-styled="true"> <code> </ </code> <code> head </code> <code> <code></h3><ul>0110 </p><p data-readability-styled="true"> <code> < </code> <code> body </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> < </code> <code> pre </code> <code> > </code></p><p data-readability-styled="true"> <code> </code> <code> &lt is entity name for < </code></p><p data-readability-styled="true"> <code> </code> <code> </ </code> <code> pre </code> <code> > корпус0048</tr></tbody></table><p> <strong> Вывод: </strong></p><p> Вывод</p><p> <strong> Объяснение: </strong> В приведенном выше примере <strong> "&" </strong> заменяется на <strong> "&" </strong> и <strong> «<» </strong> заменяется на <strong> «<» </strong></p> <br/><h2><span class="ez-toc-section" id="_HTML-5"> Помощь с HTML | Информационные технологии </span></h2><h3><span class="ez-toc-section" id="i-24"> Обзор </span></h3><p> Ваша учетная запись University Computing Account дает вам доступ к пространству в файловой системе Andrew (AFS), включая место, где вы можете разместить личную веб-страницу.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/p/pxaNPq8WEZDdtSXh5GcTKvOAlFYsmwzQuBVeML/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/p/pxaNPq8WEZDdtSXh5GcTKvOAlFYsmwzQuBVeML/slide-12.jpg' /></noscript> Первым шагом является создание веб-страниц с использованием языка гипертекстовой разметки (HTML). Эти справочные листы охватывают некоторые основы HTML. Дополнительную информацию о HTML можно найти в кратком руководстве по HTML, размещенном Консорциумом World Wide Web.</p><p> После того, как вы создали свои веб-страницы с помощью HTML, вам нужно будет загрузить их в место на AFS, где их смогут просматривать другие. Подробные инструкции см. в нашем справочном листе под названием «Создание собственного веб-сайта».</p><h3><span class="ez-toc-section" id="_HTML-6"> Основы HTML </span></h3><p> HTML основан на простом тексте и не требует специального приложения для его создания, хотя существует множество полезных программ для создания HTML. В этом справочном листе предполагается, что вы используете текстовый редактор, например Блокнот. Если вы используете программу разработки HTML, такую как Dreamweaver, вам следует обратиться к документации программы и внутренней справке.</p><p> HTML использует простой набор кодов, известных как теги.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wpcourses.ru/wp-content/uploads/2020/06/insert-head1.png' /><noscript><img loading='lazy' src='/800/600/http/wpcourses.ru/wp-content/uploads/2020/06/insert-head1.png' /></noscript> Теги заставляют обычный текст отображаться в отформатированной форме (например, полужирным шрифтом или курсивом) при просмотре документа в веб-браузере. Теги отмечаются угловыми скобками < и >.</p><p> Большинство тегов работают как часть набора, содержащего открывающий тег и закрывающий тег. Открывающие теги <em> <tag> </em> запускают определенную функцию, а закрывающие теги <<em> /tag </em>> закрывают функцию. Например, если вы хотите, чтобы текст отображался жирным шрифтом, вам понадобятся открывающий тег <b> и закрывающий тег </b>. Важно следить за открывающими и закрывающими тегами. Если вы забудете закрыть тег, вы можете столкнуться с неправильным форматированием всего документа. Теги HTML могут вкладываться друг в друга, поэтому вы можете использовать несколько видов форматирования одновременно.</p><p> <strong> Примечание: </strong> Не для всех тегов требуются закрывающие теги. Некоторые из них являются автономными тегами. Многие люди используют закрывающие теги с автономными тегами, чтобы сделать свой HTML-код более понятным для других.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/2/3/e/23ea74b73baf9be1739fb82f822e6705.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/2/3/e/23ea74b73baf9be1739fb82f822e6705.jpeg' /></noscript> Или чтобы случайно не забыли нужный закрывающий тег. Некоторые программы разработки HTML автоматически удаляют или вставляют эти дополнительные закрывающие теги, а веб-браузеры игнорируют теги при отображении страниц.</p><h3><span class="ez-toc-section" id="i-25"> Обязательные теги </span></h3><p> При написании веб-страницы сначала настройте открывающие и закрывающие теги, необходимые для правильного понимания документа веб-браузерами.</p><table border="1" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top"><p> <strong><html </strong> <strong> >.. </strong> <strong> .</html> </strong> отметить начало и конец всего документа и указать веб-браузеру отображать файл в формате HTML, а не в каком-либо другом формате. Все остальные теги должны быть вложены внутрь тегов<html>.</p></td></tr><tr><td valign="top"><p> <strong><head </strong> <strong> >.. </strong> <strong> .</head> </strong> создайте заголовок для своей страницы. Они содержат теги<title>. На более сложных страницах заголовок может также содержать другую информацию, такую как ключевые слова поисковой системы или Javascript.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/moi-start.ru/images/otobraghenie-tega-code.jpg' /><noscript><img loading='lazy' src='/800/600/http/moi-start.ru/images/otobraghenie-tega-code.jpg' /></noscript></p></td></tr><tr><td valign="top"><p> <strong><title </strong> <strong> >.. </strong> <strong> .</title> </strong> создать заголовок, который отображается в верхней части окна браузера. Они должны быть вложены внутри тега<head>.</p></td></tr><tr><td valign="top"><p> <strong><body </strong> <strong> >.. </strong> <strong> .<script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body> </strong> отмечают начало и конец видимой части документа, части, отображаемой внутри окна веб-браузера. Любые видимые элементы, такие как текст и графика, должны быть вложены внутрь тега<body>. Тег body может иметь набор определенных свойств, таких как цвет фона. Например, чтобы установить белый фон страницы, используйте тег<body bgcolor="white">.</p></td></tr></tbody></table><p> </p><p> Браузеры используют теги<html>,<head>,<title> и<body> для определения основного вида страницы. Эти элементы должны быть вложены, как показано, иначе браузер не сможет правильно их интерпретировать.</p><p></p><h3><span class="ez-toc-section" id="i-26"> Теги форматирования и интервалов </span></h3><p> Веб-браузеры не отображают текст точно так, как он отображается в исходном файле HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/9/2/7/9270eda8c123b20a6ba3b4c4f130945a.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/9/2/7/9270eda8c123b20a6ba3b4c4f130945a.jpeg' /></noscript> Чтобы веб-браузер отображал форматирование, такое как заголовки, жирный шрифт или курсив, текст, который вы хотите отформатировать, должен быть заключен в теги форматирования. Вы не сможете увидеть сами теги при просмотре файла через веб-браузер.</p><table border="1" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top"><p> <strong><h2><span class="ez-toc-section" id="i-27">...</span></h2> </strong> — самый большой тег заголовка. Часто используется для размещения заголовка в верхней части страницы.</p></td></tr><tr><td valign="top"><p> <strong><h3><span class="ez-toc-section" id="i-28">...</span></h3> </strong> и <strong><h4><span class="ez-toc-section" id="i-29">...</span></h4> </strong> — это меньшие заголовки, часто используемые для выделения подразделов.</p></td></tr><tr><td valign="top"><p> <strong> <b> </strong> <strong> ... </strong> <strong> </b> </strong> будет жирным шрифтом.</p></td></tr><tr><td valign="top"><p> <strong> </strong> <strong> <i> </strong> <strong> ... </strong> <strong> </i> </strong> выделяет текст курсивом.</p></td></tr></tbody></table><p> Веб-браузеры также игнорируют более одного пробела между словами или после знаков препинания, а также любые пробелы между строками.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/8/8EyBq3ZmSxOTV041JiQXKfWu2lPobsMgpD5GF6/slide-10.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/8/8EyBq3ZmSxOTV041JiQXKfWu2lPobsMgpD5GF6/slide-10.jpg' /></noscript> Есть три тега, которые вы можете использовать для управления размещением текста после его просмотра в веб-браузере.</p><table border="1" cellpadding="0" cellspacing="0"><tbody><tr><td valign="top"><p> <strong> <br> </strong> вставляет разрыв строки и начинает следующий текст с новой строки. Этот тег не требует закрывающего тега.</p></td></tr><tr><td valign="top"><p> <strong><p> </strong> вставляет полный разрыв абзаца, оставляя пустую строку между предыдущим и последующим текстом. Этот тег не требует закрывающего тега, но многие люди используют закрывающий</p>, чтобы сделать свой код более понятным для других.</p></td></tr><tr><td valign="top"><p> <strong><pre>...</pre></strong> указывают браузеру, что текст предварительно отформатирован и должен отображаться точно так же, как в исходном файле. Текст, заключенный в теги<pre>, не будет отображаться в каком-либо форматировании, например полужирным или курсивом, и отображается шрифтом фиксированной ширины, например Courier.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/white-windows.ru/wp-content/uploads/2012/12/pfw1.jpg' /><noscript><img loading='lazy' src='/800/600/http/white-windows.ru/wp-content/uploads/2012/12/pfw1.jpg' /></noscript> Некоторые программы веб-разработки позволяют вам связывать предварительно отформатированный текст, но многие этого не делают. </p> </td> </tr> </tbody> </table> <p> В дополнение к тегам вы можете использовать специальный символ, называемый неразрывным пробелом, чтобы добавить больше пробелов между словами или после знаков препинания. Чтобы использовать неразрывный пробел, введите <strong>   </strong>, где вы хотите, чтобы появился пробел. </p> <p> Следующий HTML-код: </p> <p> </p> <p> Создает следующий вывод браузера: </p> <p> </p> <p> Обратите внимание на несколько пробелов между «Четыре» и «Пять». </p> <h3><span class="ez-toc-section" id="i-30"> Создание списков </span></h3> <p> Есть два типа списков, которые люди обычно хотят создавать на веб-страницах: нумерованные списки и маркированные списки. HTML называет эти списки «упорядоченными списками» и «неупорядоченными списками». </p> <table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"> <p> <strong> <ol>...</ol> </strong> устанавливает упорядоченный (нумерованный) список.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/8/e/d/8ed9c7ad19578f34f0f9f1a62924b7fb.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/8/e/d/8ed9c7ad19578f34f0f9f1a62924b7fb.jpeg' /></noscript> </p> </td> </tr> <tr> <td valign="top"> <p> <strong> <ul>...</ul> </strong> устанавливает неупорядоченный (маркированный) список. </p> </td> </tr> <tr> <td valign="top"> <p> <strong> <li> </strong> отмечает элементы в списке. Этот тег не требует закрывающего тега. Как и в случае с тегом <p>, многие люди используют закрывающий </li> код, более понятный другим. </p> </td> </tr> </tbody> </table> <p> Следующий HTML: </p> <p> <strong> </strong> </p> <p> генерирует следующий вывод браузера: </p> <p> <strong> </strong> </p> <h3><span class="ez-toc-section" id="i-31"> Связывание с другими документами </span></h3> <p> </p> <p> HTML позволяет вам создавать.0028 в другие файлы в Интернете. </p> <table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"> <p> <strong> </strong> <strong> <a>...</a> </strong> создает ссылку. Вам нужно указать, куда должна идти ссылка в открывающем теге. Чтобы указать адрес ссылки, вы используете параметр href внутри тега <a>. </p> </td> </tr> </tbody> </table> <p> Следующий HTML-код: </p> <p> </p> <p> Создает следующий вывод браузера: </p> <p> </p> <p> В этом случае файл here.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/9/914376/slide_7.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/9/914376/slide_7.jpg' /></noscript> html должен находиться в том же каталоге, что и файл, из которого он связан. это называется <strong> относительная ссылка </strong> , так как он использует расположение двух файлов <em> относительно друг друга </em> для поиска связанного файла. Вы можете использовать относительные ссылки на любые файлы в вашем каталоге public/html, включая подкаталоги. </p> <p> <strong> Примечание: </strong> если файл находится в подкаталоге public/html, вам нужно будет указать подкаталог или каталоги, разделенные косой чертой. Например, <a href="class/schedule/here.html"> будет искать в подкаталоге class, затем в каталоге расписания внутри класса, а затем искать здесь.html. </p> <p> Если вы хотите создать ссылку на документ, который не находится в вашем пространстве AFS, вам нужно будет ввести полное местоположение документа в HTML-коде. Это включает в себя http:// в начале URL-адреса. Эти ссылки называются <strong> абсолютными ссылками </strong> , потому что вместо использования относительного положения они используют <em> полное (абсолютное) местоположение файла в Интернете </em> .<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/137015668/original/ac1227df5b2be2fa6dc9391e9966b9a9aca95ba3/create-a-website-for-you-or-your-business-using-html-code.png' /><noscript><img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/137015668/original/ac1227df5b2be2fa6dc9391e9966b9a9aca95ba3/create-a-website-for-you-or-your-business-using-html-code.png' /></noscript> </p> <p> </p> <p> <strong> Примечание: </strong> Код ссылки может быть разбит на несколько строк и может содержать несколько слов и изображений. Помните, что если нет тега <br> или <p>, веб-браузер будет игнорировать все разрывы строк. Таким образом, тег <a> (или любой другой тег) не будет разорван на несколько строк. </p> <p> <strong> ВАЖНО! </strong> Не забудьте закрыть теги ссылок. Если вы не вставите закрывающий тег </a>, все, что следует за открывающим тегом <a href="...>, будет активной ссылкой. </p> <h3><span class="ez-toc-section" id="i-32"> Ссылки электронной почты </span></h3> <p> Ссылки электронной почты используют те же теги, что и обычные ссылки. Однако вместо того, чтобы вводить URL, начинающийся с http://, внутри тега <a href="...>, вы вводите адрес электронной почты, начинающийся с mailto:. </p> <p> </p> <p> Многие люди вводят адрес электронной почты в качестве связанного слова, чтобы читатели могли либо записать адрес электронной почты, либо распечатать страницу. </p> <h3><span class="ez-toc-section" id="i-33"> Включая изображения </span></h3> <p> Изображения в Интернете обычно имеют один из двух форматов: CompuServe Graphic Interchange Format (GIF) и формат Joint Photographic Experts Group (JPEG).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/udomlya.ru/~nelly/Web_design/1.12.jpg' /><noscript><img loading='lazy' src='/800/600/http/udomlya.ru/~nelly/Web_design/1.12.jpg' /></noscript> Вы можете определить эти файлы по расширениям .gif и .jpg (или .jpeg). </p> <p> Файлы изображений, как и другие ваши файлы, должны находиться в вашем каталоге public/html, чтобы веб-серверы университета могли получить к ним доступ. Вы, вероятно, захотите использовать программу FTP для загрузки файлов в свой каталог. </p> <p> После того, как файл загружен, вы можете либо создать ссылку на него, как на любой другой файл, либо встроить его в веб-страницу. </p> <p> </p> <table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td valign="top"> <p> <strong> <img> </strong> можно использовать для встраивания файла в страницу. Как и в случае с тегом <a>, вы должны указать ему, где найти файл для встраивания. Вы делаете это, устанавливая параметр src. Тег <img> не нуждается в закрывающем теге. </p> </td> </tr> </tbody> </table> <p> Следующий HTML-код: </p> <p> </p> <p> Генерирует следующий вывод браузера: </p> <p> </p> <p> Многие люди размещают теги <p> до и после тегов <img>, чтобы текст не попадал на изображение.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/info-line.net/wp-content/gallery/html_1/2011-04-17_190632.jpg' /><noscript><img loading='lazy' src='/800/600/http/info-line.net/wp-content/gallery/html_1/2011-04-17_190632.jpg' /></noscript> Вы также можете использовать параметр align для переноса текста вокруг изображения. Следующий HTML: </p> <p> </p> <p> Генерирует следующий вывод браузера: </p> <p> </p> <h3><span class="ez-toc-section" id="i-34"> Просмотр ваших веб-страниц </span></h3> <p> Создав свои страницы, загрузите их в каталог HTML в файловой системе Andrew (AFS), следуя инструкциям в нашем справочном листе Создание собственных Веб-сайт. </p> <p> После того как вы загрузите свои личные веб-страницы в AFS, любой пользователь сможет просматривать ваш веб-сайт по адресу <strong> http://ww⁠⁠w.pitt.edu/~имя пользователя </strong> (где <strong> имя пользователя </strong> — это имя пользователя вашей учетной записи University Computing Account). Например, если имя пользователя вашей университетской вычислительной учетной записи было <strong> jdoe </strong> <em> , </em> вы просматриваете свой веб-сайт по адресу <strong> http://www.pitt.edu/~jdoe </strong> . </p> <p> <strong> Примечание. </strong> веб-пользователи получат сообщение об отказе в отображении списка каталогов, если попытаются просмотреть каталоги на веб-серверах Pitt, в которых нет файлов index.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/otvet.imgsmail.ru/download/7245993_45d3e0aaa5cee9854bd03ec841f9b73c_800.png' /><noscript><img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/7245993_45d3e0aaa5cee9854bd03ec841f9b73c_800.png' /></noscript> html. Вы должны создать файл index.html в вашем каталоге public/html и во всех его подкаталогах со ссылками на все файлы, к которым вы хотите предоставить людям доступ. </p> <h2><span class="ez-toc-section" id="1_HTML"> 1. Знакомство с HTML: язык Интернета </span></h2> <p> <strong> Единственное, что стоит между вами и выходом в Сеть, — это научиться говорить на жаргоне </strong> : </p> <p> Язык гипертекстовой разметки, или сокращенно HTML. Итак, приготовьтесь к урокам языка. После этой главы вы не только поймете некоторые основные <strong> элементы </strong> HTML, но также сможете говорить на языке HTML в небольшом стиле <strong>. </strong> Черт возьми, к концу этой книги вы будете говорить на HTML так, как будто вы выросли в Вебвилле. </p> <p> Хотите поделиться своей идеей? Продать что-нибудь? Просто нужен творческий выход? Обратитесь к Интернету — нам не нужно говорить вам, что он стал универсальной формой общения. Более того, это форма общения <strong> ВЫ </strong> можете участвовать. </p> <p> Но если вы действительно хотите эффективно использовать Сеть, вам нужно знать кое-что о <strong> HTML </strong>, не говоря уже о том, как работает Сеть.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/2zkxh-ELFmk/hqdefault.jpg' /><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/2zkxh-ELFmk/hqdefault.jpg' /></noscript> Давайте посмотрим с высоты 30 000 футов: </p> <p> Веб-серверы постоянно работают в Интернете, неустанно ожидая запросов от веб-браузеров. Какие запросы? Запросы на веб-страницы, изображения, звуки или даже видео. Когда сервер получает запрос на любой из этих ресурсов, сервер находит ресурс и затем отправляет его обратно в браузер. </p> <p> Вы уже знаете, как работает браузер: вы просматриваете Интернет и нажимаете ссылку, чтобы посетить страницу. Этот щелчок заставляет ваш браузер запрашивать HTML-страницу с веб-сервера, извлекать ее и отображать страницу в окне браузера. </p> <p> Но откуда браузер знает, как отображать страницу? Вот тут-то и появляется HTML. HTML сообщает браузеру все о содержании и структуре страницы. Давайте посмотрим, как это работает... </p> <p> Итак, вы знаете, что HTML — это ключ к тому, чтобы браузер отображал ваши страницы, но как именно выглядит HTML? И что он делает? </p> <p> Давайте взглянем на небольшой HTML-код... представьте, что вы собираетесь создать веб-страницу для рекламы <em> Head First Lounge </em> , местной тусовки с хорошей музыкой, освежающими эликсирами и беспроводным доступом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/o/od5OZF9WmUBAMkrEXHQV8Tqipz3jsShfcaG2uD/slide-5.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/o/od5OZF9WmUBAMkrEXHQV8Tqipz3jsShfcaG2uD/slide-5.jpg' /></noscript> Вот что вы должны написать в HTML: </p> <h4><span class="ez-toc-section" id="Relax"> Relax </span></h4> <p> <strong> Мы не ожидаем, что вы пока знаете HTML. </strong> </p> <p> К этому моменту вы должны получить представление о том, как выглядит HTML; мы собираемся подробно рассказать обо всем чуть позже. А пока изучите HTML и посмотрите, как он будет представлен в браузере на следующей странице. Обязательно обращайте пристальное внимание на каждую буквенную аннотацию и на то, как и где она отображается в браузере. </p> <p> Когда браузер читает ваш HTML, он интерпретирует все <em> теги, </em> окружающие ваш текст. Теги — это просто слова или символы в угловых скобках, например <code> <head> </code>, <code> <p> </code>, <code> <h2> </h2></code> и так далее. Теги сообщают браузеру о структуре <em> и значении </em> вашего текста. Таким образом, вместо того, чтобы просто давать браузеру кучу текста, с HTML вы можете использовать теги, чтобы сообщить браузеру, какой текст находится в заголовке, какой текст является абзацем, какой текст нужно выделить или даже где нужно разместить изображения.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-13.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/t/Tz2ZP9IWuHyRVrmStGxv301kL8d5psNXloKbaM/slide-13.jpg' /></noscript> . </p> <p> Давайте посмотрим, как браузер интерпретирует теги в Head First Lounge: </p> <p> Starbuzz Coffee зарекомендовала себя как самая быстрорастущая кофейня в мире. Если вы видели один на вашем местном углу, посмотрите через улицу — вы увидите еще один. </p> <p> На самом деле, они выросли так быстро, что им еще даже не удалось создать веб-страницу... и в этом заключается ваш большой прорыв: случайно, покупая чай Starbuzz, вы сталкиваетесь с Starbuzz. Генеральный директор... </p> <h4><span class="ez-toc-section" id="Brain_Power"> Brain Power </span></h4> <p> Решения, постановления. Отметьте свой первый приоритет ниже (выберите только один): </p> <h4><span class="ez-toc-section" id="i-35"> Примечание </span></h4> <p> Генеральный директор что-то нацарапывает на салфетке и передает вам... </p> <h4><span class="ez-toc-section" id="i-36"> Примечание </span></h4> <p> * Если вы случайно выбрали вариант A, B или D на На предыдущей странице мы рекомендуем вам подарить эту книгу хорошей библиотеке, использовать ее в качестве растопки этой зимой или, черт возьми, продать ее на Amazon и заработать немного денег. </p> <p> <strong> Конечно, единственная проблема со всем этим заключается в том, что вы еще не создали ни одной веб-страницы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/technical-tips.com/assets/images/photos/1559480966.png' /><noscript><img loading='lazy' src='/800/600/http/technical-tips.com/assets/images/photos/1559480966.png' /></noscript> Но именно поэтому вы решили с головой погрузиться в HTML, верно? </strong> </p> <p> <strong> Не беспокойтесь, вот что вы будете делать на следующих нескольких страницах: </strong> </p> <ol> <li> <p> <strong> Создайте файл HTML с помощью вашего любимого текстового редактора. </strong> </p> </li> <li> <p> <strong> Введите в меню генеральный директор Starbuzz, который написал на салфетке. </strong> </p> </li> <li> <p> <strong> Сохраните файл как «index.html». </strong> </p> </li> <li> <p> <strong> Откройте файл «index.html» в своем любимом браузере, сделайте шаг назад и наблюдайте, как происходит волшебство. </strong> </p> </li> </ol> <p> Все файлы HTML являются текстовыми файлами. Чтобы создать текстовый файл, вам понадобится приложение, которое позволит вам создавать обычный текст, не добавляя много причудливого форматирования и специальных символов. Вам просто нужен простой, чистый текст. </p> <p> В этой книге мы будем использовать TextEdit на Mac; однако, если вы предпочитаете другой текстовый редактор, он тоже должен работать нормально.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/otvet.imgsmail.ru/download/105030360_0e46183fa74d466c27bad5b46ff12cfb_800.png' /><noscript><img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/105030360_0e46183fa74d466c27bad5b46ff12cfb_800.png' /></noscript> И, если вы работаете в Windows, вам нужно пропустить пару страниц вперед к инструкциям Windows. </p> <p> <strong> Шаг первый: </strong> </p> <ul> <li> <p> Перейдите к папке <strong> Applications </strong> </p> <p> Приложение TextEdit находится в папке <em> Applications </em>. Самый простой способ добраться туда — выбрать «Новое окно Finder» в меню «Файл» Finder, а затем найти приложение прямо в ярлыках. Когда вы найдете его, нажмите Приложения. </p> </li> </ul> <p> <strong> Шаг второй: </strong> </p> <ul> <li> <p> Найдите и запустите <strong> TextEdit </strong> </p> <p> Вероятно, у вас есть много приложений, перечисленных в вашем 9Папка 0416 Applications </em>, поэтому прокрутите вниз, пока не увидите TextEdit. Чтобы запустить приложение, дважды щелкните значок TextEdit. </p> </li> </ul> <p> <strong> Шаг третий (необязательно): </strong> </p> <ul> <li> <p> Сохраните <strong> TextEdit </strong> в доке <strong> </strong> </p> <p> после запуска приложения). Когда появится всплывающее меню, выберите «Параметры», затем «Сохранить в доке».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.pinimg.com/originals/5f/2c/fe/5f2cfef31d82e636603f30c6e37aba35.png' /><noscript><img loading='lazy' src='/800/600/http/i.pinimg.com/originals/5f/2c/fe/5f2cfef31d82e636603f30c6e37aba35.png' /></noscript> Таким образом, значок TextEdit всегда будет отображаться в доке, и вам не придется искать его в 9Папка 0416 Applications </em> каждый раз, когда вам нужно ее использовать. </p> </li> </ul> <p> <strong> Шаг четвертый: </strong> </p> <ul> <li> <p> Измените свой TextEdit <strong> Настройки </strong> </p> <p> По умолчанию TextEdit находится в режиме «форматированного текста», что означает, что он добавит в ваш файл собственное форматирование и специальные символы при сохранении это - не то, что вы хотите. Итак, вам нужно изменить настройки TextEdit, чтобы TextEdit сохранял вашу работу как чистый текстовый файл. Для этого сначала выберите пункт меню Preferences в меню TextEdit. </p> </li> </ul> <p> <strong> Шаг пятый: </strong> </p> <ul> <li> <p> Установите настройки для <strong> Обычный текст </strong> </p> <p> Когда вы увидите диалоговое окно «Настройки», вам нужно сделать три вещи. </p> <p> Сначала выберите «Обычный текст» в качестве режима редактора по умолчанию на вкладке «Новый документ».<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/2/0/a/20abe92e1b9b58ea1b77e2da3c2e1712.jpeg' /><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/2/0/a/20abe92e1b9b58ea1b77e2da3c2e1712.jpeg' /></noscript> </p> <p> На вкладке «Открыть и сохранить» убедитесь, что установлен флажок «Игнорировать команды форматированного текста в файлах HTML». </p> <p> Наконец, убедитесь, что «Добавить расширение .txt к обычным текстовым файлам» имеет значение <strong> и 9.0028 проверено. </p> <p> Вот и все; чтобы закрыть диалоговое окно, нажмите красную кнопку в верхнем левом углу. </p> </li> </ul> <p> <strong> Шаг шестой: </strong> </p> <ul> <li> <p> <strong> Закройте </strong> и <strong> перезапустите </strong> </p> <p> Теперь выйдите из TextEdit, выбрав «Выход» в меню TextEdit, а затем перезапустите приложение. На этот раз вверху вы увидите окно без причудливых меню форматирования текста. Теперь вы готовы создать HTML. </p> </li> </ul> <h4><span class="ez-toc-section" id="i-37"> Примечание </span></h4> <p> Или другая версия Windows </p> <p> Если вы читаете эту страницу, вы должны быть пользователем Windows 7. Если нет, вы можете пропустить пару страниц вперед. Или, если вы просто хотите сидеть сзади и не задавать вопросов, мы тоже не против. </p> <h4><span class="ez-toc-section" id="Note"> Note </span></h4> <p> Если вы используете другую версию Windows, вы также найдете Блокнот там.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/c/cug053htPa8qnlYyExUpmzeQio6kR9Cbd7I2Vs/slide-16.jpg' /><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/c/cug053htPa8qnlYyExUpmzeQio6kR9Cbd7I2Vs/slide-16.jpg' /></noscript> </p> <p> Для создания HTML-файлов в Windows 7 мы будем использовать «Блокнот» — он поставляется с каждой копией Windows, имеет приемлемую цену и прост в использовании. Если у вас есть собственный любимый редактор, работающий в Windows 7, это тоже нормально; просто убедитесь, что вы можете создать обычный текстовый файл с расширением «.html». </p> <p> Предполагая, что вы используете Блокнот, вот как вы собираетесь создать свой первый HTML-файл. </p> <p> <strong> Шаг первый: </strong> </p> <ul> <li> <p> Откройте меню <strong> Пуск </strong> и перейдите в Блокнот. </p> <p> Вы найдете приложение «Блокнот» в <em> Аксессуары </em> . Самый простой способ попасть туда — щелкнуть меню «Пуск», затем «Все программы», затем «Стандартные». Там вы увидите Блокнот. </p> </li> </ul> <p> <strong> Шаг второй: </strong> </p> <p> <strong> Шаг третий (необязательно): </strong> </p> <ul> <li> <h4><span class="ez-toc-section" id="i-38"> Примечание </span></h4> <p> Но рекомендуется </p> <p> Не скрывать расширения известных типов файлов. </p> <p> По умолчанию проводник Windows скрывает расширения файлов известных типов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/u05cx.png' /><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/u05cx.png' /></noscript> Например, файл с именем «Irule.html» будет отображаться в Проводнике как «Irule» без расширения «.html». </p> <p> Будет намного проще, если Windows покажет вам эти расширения, поэтому давайте изменим параметры вашей папки, чтобы вы могли их видеть. </p> <p> Сначала откройте «Свойства папки». Для этого нажмите кнопку «Пуск», выберите «Панель управления», выберите «Оформление и персонализация», а затем щелкните «Свойства папки». </p> <p> Затем на вкладке «Вид» в разделе «Дополнительные параметры» прокрутите вниз, пока не увидите «Скрыть расширения для известных типов файлов» и <em> снимите этот флажок. </p> <p> Вот и все. Нажмите кнопку «ОК», чтобы сохранить настройку, и теперь вы увидите расширения файлов в проводнике. </p> </li> </ul> <p> Хорошо, теперь, когда вы знаете основы создания текстового файла, вам просто нужно получить содержимое в текстовом редакторе, сохранить его, а затем загрузить в браузер. </p> <p> Начните с ввода напитков прямо с салфетки генерального директора; эти напитки являются содержанием вашей страницы.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/hobiz.ru/wp-content/uploads/2005/08/iStock_000013074154Small.jpg' /><noscript><img loading='lazy' src='/800/600/http/hobiz.ru/wp-content/uploads/2005/08/iStock_000013074154Small.jpg' /></noscript> Вы добавите немного HTML-разметки, чтобы придать содержимому некоторую структуру, но сейчас просто напечатайте основной контент. Пока вы это делаете, добавьте «Starbuzz Coffee Beverages» в верхней части файл. </p> <p> После того, как вы введете напитки с салфетки генерального директора, вы сохраните свою работу в файле с именем «index.html». Прежде чем вы это сделаете, вам нужно создать папку с именем «starbuzz» для хранения файлов сайта. </p> <p> Чтобы все это началось, выберите «Сохранить» в меню «Файл», и вы увидите диалоговое окно «Сохранить как». Тогда вот что вам нужно сделать: </p> <ol> <li> <p> Сначала создайте папку «starbuzz» для всех ваших файлов, связанных со Starbuzz. Вы можете сделать это с помощью кнопки «Новая папка». </p> </li> <li> <p> Затем щелкните только что созданную папку «starbuzz», затем введите «index.html» в качестве имени файла и нажмите кнопку «Сохранить». </p> </li> </ol> <p> Вы готовы открыть свою первую веб-страницу? В своем любимом браузере выберите «Открыть файл.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/7/8/2/7824e03c193611bd3993e1812978bd5f.png' /><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/7/8/2/7824e03c193611bd3993e1812978bd5f.png' /></noscript> ..» (или «Открыть...» в Windows 7 и Internet Explorer) в меню «Файл» и перейдите к файлу «index.html». Выберите его и нажмите Открыть. </p> <p> Успех! Вы загрузили страницу в браузере, хотя результаты немного... э... неудовлетворительны. Но это только потому, что все, что вы сделали до сих пор, — это прошли механику создания страницы и просмотра ее в браузере. И до сих пор вы набрали только <em> содержание </em> веб-страницы. Вот тут-то и появляется HTML. HTML дает вам способ сообщить браузеру <em> о структуре </em> вашей страницы. Что такое структура? Как вы уже видели, это способ разметки вашего текста, чтобы браузер знал, что такое заголовок, какой текст находится в абзаце, какой текст является подзаголовком и так далее. Как только браузер немного узнает о структуре, он может отобразить вашу страницу в более осмысленном и удобочитаемом виде. </p> <p> У вас есть HTML-файл с разметкой — получается ли это веб-страницей? Почти. Вы уже видели <code> <html> </code> , <code> <head> </code> , <code> <title> </code> и <code> <body> </code> теги, и нам просто нужно добавить их, чтобы сделать эту HTML-страницу первоклассной.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/cloud.prezentacii.org/18/11/97306/images/screen16.jpg' /><noscript><img loading='lazy' src='/800/600/http/cloud.prezentacii.org/18/11/97306/images/screen16.jpg' /></noscript> .. </p> <p> <strong> Вперед и измените файл index.html, добавив теги <head>, </head>, <title>, </title>, <body> и </body>. Сделав это, сохраните изменения и перезагрузите файл в браузере. </strong> </p> <p> <strong> Хорошо, вы видели немного разметки, поэтому давайте увеличим масштаб и посмотрим, как на самом деле работают теги. </strong> </p> <h4><span class="ez-toc-section" id="i-39"> Примечание </span></h4> <p> <strong> Чтобы сообщить браузеру о структуре вашей страницы, используйте пары тегов вокруг вашего контента. </strong> </p> <p> <strong> Помните: </strong> </p> <p> <strong> Элемент = открывающий тег + содержание + закрывающий тег </strong> </p> <h4><span class="ez-toc-section" id="Brain_Power-2"> Brain Power </span></h4> <p> Теги могут быть немного интереснее, чем то, что вы видели до сих пор. Вот тег абзаца с небольшим добавлением к нему. Как вы думаете, что это делает? </p> <pre> <strong> <p>Гладкая, мягкая </strong> <strong> смесь кофе из Мексики, Боливии </strong> <strong> и Гватемала.</p> </strong> </pre><p> <strong> Правильно. У нас есть структура, поэтому теперь мы собираемся сконцентрироваться на ее представлении.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/techarks.ru/upload4/img_25373.png' /><noscript><img loading='lazy' src='/800/600/http/techarks.ru/upload4/img_25373.png' /></noscript> </strong></p><p> Вы уже знаете, что HTML позволяет описать структуру содержимого ваших файлов. Когда браузер отображает ваш HTML, он использует свой собственный встроенный стиль по умолчанию для представления этой структуры. Но полагаясь на стиль браузера, вы, очевидно, не получите награды «Дизайнер месяца».</p><p> Здесь на помощь приходит CSS. CSS дает вам способ описать, как должен быть представлен ваш контент. Давайте начнем с создания некоторого CSS, который сделает страницу Starbuzz более презентабельной (и попутно начнем вашу веб-карьеру).</p><h4><span class="ez-toc-section" id="i-40"> Примечание </span></h4><p> CSS — это сокращение от Cascading Style Sheets. Мы узнаем, что все это значит, позже, а сейчас просто знайте, что CSS дает вам способ сообщить браузеру, как должны выглядеть элементы на вашей странице.</p><p> Чтобы добавить стиль, вы добавляете новый (скажите это вместе с нами) E-L-E-M-E-N-T на свою страницу — элемент <code><style></code>. Вернемся к главной странице Starbuzz и добавим немного стиля. Проверьте это.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/unect.net/assets/images/sozdanie/verstka/fragment-koda-verstki-site.jpg'/><noscript><img loading='lazy' src='/800/600/http/unect.net/assets/images/sozdanie/verstka/fragment-koda-verstki-site.jpg'/></noscript>.. </p><p>Теперь,когда у вас есть элемент <code><style></code>в заголовке HTML,все,что вам нужно сделать,это добавить немного CSS,чтобы придать странице немного шика. Ниже вы найдете CSS,уже «запеченный» для вас. Всякий раз,когда вы видите логотип,вы видите HTML и CSS,которые вы должны ввести как есть. <em>Доверьтесь нам </em>. Вы узнаете,как работает разметка,позже,когда увидите,на что она способна. </p><p>Итак,взгляните на CSS,а затем добавьте его в свой файл «index.html». После того,как вы ввели его,сохраните файл. </p><p>Пришло время для еще одного тест-драйва,поэтому перезагрузите файл index.html еще раз. На этот раз вы увидите,что веб-страница Starbuzz выглядит совершенно по-новому. </p><h4><span class="ez-toc-section" id="i-41">Смотри! </span></h4><p><strong>Если вы используете IE,вы можете не увидеть границу. </strong></p><p><em>Internet Explorer неправильно отображает границу вокруг тела. Попробуйте загрузить страницу в Firefox,Chrome или Safari,чтобы увидеть границу. </em></p><p><strong>Решение для упражнений </strong></p><p>Получите <em>Head First HTML and CSS,2-е издание </em>прямо сейчас с обучающей платформой O’Reilly.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/RDDSO.png'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/RDDSO.png'/></noscript></p><p>участника O’Reilly проходят онлайн-обучение в режиме реального времени,а также получают книги,видео и цифровой контент почти от 200 издателей. </p><p>Начать бесплатную пробную версию </p><h2><span class="ez-toc-section" id="_HTML-7">Отображение информации с помощью HTML — видеоруководство по началу работы в качестве полнофункционального веб-разработчика </span></h2><p>Из курса:Начало работы в качестве полнофункционального веб-разработчика </p><ul role="tablist"><li role="presentation"></li><li role="presentation"></li><li role="presentation"></li></ul><h3><span class="ez-toc-section" id="_HTML-8">Отображение информации с помощью HTML </span></h3><p data-readability-styled="true">“ </p><p>- HTML является основой для каждой веб-страницы. Веб-разработчик может использовать полдюжины других языков,таких как JavaScript или Python,но люди видят результаты этих программ только в веб-браузере из-за HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img25.jpg'/><noscript><img loading='lazy' src='/800/600/http/fsd.multiurok.ru/html/2020/11/23/s_5fbbba8fcaa4e/img25.jpg'/></noscript>Поэтому понимание этого имеет решающее значение для каждого веб-разработчика. Один из способов увидеть HTML-код страницы в Chrome — перейти в меню «Вид»,затем в «Разработчик»,а затем в «Проверить элементы». Что я действительно хочу,чтобы вы увидели здесь,так это структуру,которая станет очевидной,если я спущусь вниз и закрою этот тег body,щелкнув маленький треугольник. Теперь мы видим,как выглядит каждая правильно построенная HTML-страница. Структура головная секция,секция тела. Оба они заключены в теги HTML. Вверху также есть несколько необязательная декларация типа документа. Внутри разделов head и body находится множество других HTML-кодов,известных как теги. Некоторые теги имеют как открывающую,так и закрывающую части. Обе части заключены в угловые скобки. Как вы видите здесь с закрывающей частью,обозначенной/перед именем тега,этот тег означает,что текст приветствия отображается с заголовком один раз. Также может быть несколько слоев тегов. Здесь текст Hello отображается жирным шрифтом и курсивом из-за тегов b и i.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/6/6/2/662fd8033b7634c1de9074bf1faeea17.png'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/6/6/2/662fd8033b7634c1de9074bf1faeea17.png'/></noscript>Некоторые теги состоят только из одной части. Они не могут охватывать другие вещи,которые они написали,как вы видите здесь,открывающая скобка,косая черта,косая черта,закрывающая скобка. Пример здесь рисует горизонтальное правило. Это строка на странице. Большинство тегов также имеют параметры,называемые атрибутами,которые помещаются в скобки после тега. Некоторые из них изменяют действие тега. Например,тег IMG для изображений имеет обязательный атрибут SRC,чтобы указать,какие файлы изображений следует отображать. SRC означает источник. И есть необязательный атрибут alt для текста,который отображается,если изображение недоступно Некоторые атрибуты идентифицируют элемент,идентификатор и класс являются двумя очень распространенными такими атрибутами,языки программирования,такие как CSS,PHP и JavaScript,могут влиять на элементы страницы на основе на их идентификаторы и классы. Атрибуты форматируются как нечто,называемое парами ключ-значение. Во-первых,это ключ. В последнем примере это слово class.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/2/28/Insert-Images-with-HTML-Step-4-Version-2.jpg'/><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/2/28/Insert-Images-with-HTML-Step-4-Version-2.jpg'/></noscript>И тогда значение в кавычках в этом случае с отступом. Затем есть теги,которые используются,чтобы показать,что страница содержит код откуда-то еще. Скрипт,iframe и ссылка — три примера. Все эти примеры находятся в этом файле упражнений видео с комментариями. Я сделал копию на рабочий стол. Я открою его в своем редакторе кода,перетащив его поверх значка кода Visual Studio прямо здесь. Редактор кода знает,что это файл HTML,потому что имя файла заканчивается на .HTM или .HTML. Итак,мы видим всю эту красивую окраску синтаксиса здесь. Теперь я закрою это,вернусь на рабочий стол,скрою все остальное и перетащу его в Google Chrome. Так что мы можем видеть это в браузере. Теперь,если я захожу в View,Developer и View Source,мы видим исходник в том виде,в котором его получил браузер. Теперь мы можем вернуться на домашнюю страницу отелей Landon и немного разобраться в том,что происходит. Мы начинаем с тега HTML,атрибут Lang которого равен E N,и так далее по всей странице. И вы можете сделать это с любой страницей в Интернете.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/nordd.ru/wp-content/uploads/2016/09/%D1%82%D0%BE-%D1%87%D1%82%D0%BE-%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%81%D1%8F-%D0%B2-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%BE%D0%BC-%D0%BA%D0%BE%D0%B4%D0%B5-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg'/><noscript><img loading='lazy' src='/800/600/http/nordd.ru/wp-content/uploads/2016/09/%D1%82%D0%BE-%D1%87%D1%82%D0%BE-%D0%B2%D1%8B%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D1%81%D1%8F-%D0%B2-%D0%B8%D1%81%D1%85%D0%BE%D0%B4%D0%BD%D0%BE%D0%BC-%D0%BA%D0%BE%D0%B4%D0%B5-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%82%D0%BE%D1%80%D0%B0-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86-%D1%81%D0%B0%D0%B9%D1%82%D0%B0.jpg'/></noscript>Начните пробовать это,зайдите на сайт,который вам нравится. Посмотрите исходник и покопайтесь. Вы еще не поймете большинство деталей,но вы получите представление о том,как страницы структурированы в HTML. Когда вы будете готовы копнуть глубже. Я предпочитаю справочное руководство по адресу developer.mozilla.org. Просто перейдите к технологиям,а затем к HTML,и вы найдете месяцы бесплатного обучения. И,естественно,у нас есть множество курсов по изучению LinkedIn,которые помогут включить очень популярный базовый курс HTML. </p><h3><span class="ez-toc-section" id="i-42">Содержание </span></h3><ul><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li></ul><h2><span class="ez-toc-section" id="_HTML_HTML-2">Базовый HTML:Текстовые элементы в HTML </span></h2><h5 tabindex="0" aria-label="Lesson Divider Lesson 3: Text Elements in HTML"><span class="ez-toc-section" id="_3">Урок 3.</span></h5><img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.ytimg.com/vi/B1BWiHOx-Nc/hqdefault.jpg'/><noscript><img loading='lazy' src='/800/600/http/i.ytimg.com/vi/B1BWiHOx-Nc/hqdefault.jpg'/></noscript>Текстовые элементы в HTML </h5><p>/en/basic-html/create-a-webpage/content/</p><h4><span class="ez-toc-section" id="_HTML-9">Добавление текстовых элементов в HTML </span></h4><p>Этот урок является частью серии <strong>,посвященной компьютерному программированию </strong>. Вы можете перейти к Введение в программирование ,если хотите начать с самого начала. </p><p>Одними из наиболее распространенных HTML-элементов,составляющих веб-страницу,являются <strong>текстовых элементов </strong>. Весь текст,который вы читаете на этом веб-сайте,например,будь то заголовки вверху страницы,заголовки разделов или сам этот текст,состоит из текстовых элементов HTML. </p><h5><span class="ez-toc-section" id="i-43">Элемент абзаца </span></h5><iframe src="https://www.youtube.com/embed/By-d827_0jo?rel=0&showinfo=0" allowfullscreen="" frameborder="0"></iframe><p>Самым простым способом добавления текста на веб-страницу является элемент абзаца <strong></strong>. Если вы следовали этому руководству,вы видели этот элемент раньше,но стоит повторить,потому что элемент абзаца является одним из наиболее распространенных элементов HTML,используемых на большинстве веб-сайтов,которые вы посещаете каждый день.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/7/9/9/7999d62571c4f96cff84ddc2cf642d51.jpeg'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/7/9/9/7999d62571c4f96cff84ddc2cf642d51.jpeg'/></noscript></p><pre><p>Это абзац</p></pre><p>По умолчанию каждый браузер помещает <strong>немного пробела <strong>над и под элементами абзаца при их отображении,что делает каждый абзац независимым от окружающих его абзацев,точно так же,как абзацы,которые вы видели бы напечатанными в книге или журнале. <br/></p><h5><span class="ez-toc-section" id="i-44">Элементы заголовка </span></h5><p>Подобно элементу абзаца,<strong>элементы заголовка </strong>также используются для отображения текста на экране. Обычно они используются для создания <strong>заголовков разделов </strong>. </p><pre><h2><span class="ez-toc-section" id="i-45">Это элемент заголовка</span></h2></pre><p>Например,вы можете использовать элемент заголовка для отображения названия эссе,которое вы пишете,или названия главы в книге. Фактический текст эссе или главы,с другой стороны,будет использовать элементы абзаца. </p><p>Элементы заголовков имеют <strong>шесть уровней по умолчанию </strong>,<code><h2></h2></code>по <code><h6></h6></code>,которые можно представить как <strong>порядок важности </strong>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i2.wp.com/www.wikitechy.com/step-by-step-html-tutorials/img/html-images/code-explanation-main-tag-in-html.png'/><noscript><img loading='lazy' src='/800/600/http/i2.wp.com/www.wikitechy.com/step-by-step-html-tutorials/img/html-images/code-explanation-main-tag-in-html.png'/></noscript>Например,если вы поместите <code><h2></h2></code>на свою веб-страницу,можно с уверенностью предположить,что это самый важный заголовок раздела и,вероятно,вверху вашей страницы,в то время как <code><h3></h3></code>немного менее важен,и так далее. <br/></p><p>Они также поставляются с некоторыми стилями браузера <strong>по умолчанию </strong>,который усиливает этот порядок важности:элемент <code><h2></h2></code>— самый большой,<code><h3></h3></code>— меньший,и так далее. </p><pre><h2><span class="ez-toc-section" id="i-46">Это самый большой</span></h2><h3><span class="ez-toc-section" id="i-47">Это немного меньше</span></h3><h4><span class="ez-toc-section" id="i-48">Этот еще меньше</span></h4><h5><span class="ez-toc-section" id="i-49">Они продолжают уменьшаться</span></h5><h5><span class="ez-toc-section" id="i-50">Даже не такой большой</span></h5><h6><span class="ez-toc-section" id="i-51">Сейчас довольно маленький</span></h6></pre><h5><span class="ez-toc-section" id="i-52">Элементы форматирования текста </span></h5><p>Элементы форматирования текста используются для <strong>изменения внешнего вида текста </strong>определенными предопределенными способами. Например,вот несколько распространенных элементов форматирования текста:</p><ul><li><strong>B </strong><strong>old </strong>:элемент <code><b></code> выделяет свое содержимое полужирным шрифтом.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/f/5/3f5e9021daec6e971df8106b1c6ee6e8.jpeg'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/3/f/5/3f5e9021daec6e971df8106b1c6ee6e8.jpeg'/></noscript></li><li><strong>Курсив </strong>:Элемент <code><i></code>выделяет свое содержимое курсивом. </li><li><strong>Подчеркивание </strong>:Элемент <code><u></code>подчеркивает свое содержимое. </li></ul><p>Эти элементы обычно находятся <strong>вложенными </strong>внутри других текстовых элементов,таких как элементы абзаца или заголовка,потому что обычно они применяются только к части текста. Например:</p><pre><p>Эти слова не выделены жирным шрифтом,а <b>эти два</b>выделены.</p></pre><p>Этот HTML будет отображаться следующим образом:</p><h5><span class="ez-toc-section" id="i-53">Попробуйте! </span></h5><p>Попробуйте <strong>поэкспериментировать </strong>с каждым из элементов,описанных в этом уроке ,во входных данных ниже. Вы можете вводить все,что хотите,но если вам нужны идеи о том,что вводить,попробуйте использовать элементы ниже в качестве примера. </p><pre><h2><span class="ez-toc-section" id="i-54">Долгая спокойная ночь</span></h2><h4></h4><u>Глава 1:Город и тишина</u></h4><p>Детектив Хардкасл вздрогнул,когда услышал стук в дверь. Полночь в субботу,и кто-то искал кеды? Это пахло неприятностями,потому что если он и усвоил что-то за время работы частным сыщиком,так это то,что все призраки города выходят ночью.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/OHYTK.png'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/OHYTK.png'/></noscript></p><p><i>Надеюсь,ты не ищешь драки</i>,подумал он про себя. <i>Потому что если да,то вы его нашли.</i></p></pre><p>Введите свои HTML-элементы в поле ввода здесь:</p><h5><span class="ez-toc-section" id="i-55">Сделай сам! </span></h5><p>Откройте файл <strong>index.html </strong>вашего проекта <strong>GCF Programming Tutorials </strong> в текстовом редакторе и добавим несколько <strong>текстовых элементов </strong>. Для лучшего понимания убедитесь,что вы действительно вводите этот код,а не копируете и вставляете его. </p><ol><li>Когда вы впервые создали этот файл,у вас уже был один элемент фактического содержимого на странице. Сначала найдите этот элемент:<pre><p>Привет,мир!</p></pre></li><li>Продолжайте и <strong>удалите этот элемент </strong>. </li><li>Вместо этого давайте начнем создавать что-то похожее на настоящую веб-страницу,которую вы могли бы видеть в обычной жизни:веб-страницу <strong>с обзорами фильмов </strong>. Начните с <strong>заголовка </strong>и обязательно поместите его внутрь элемента <code><body></code> ,где раньше находился ваш элемент <code><p></code>: <pre><h2><span class="ez-toc-section" id="i-56">Обзоры киноклассики кино</span></h2></pre></li><li>Чуть ниже добавим подзаголовок <strong></strong>.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/moi-start.ru/images/otobraghenie-tega-pre.jpg'/><noscript><img loading='lazy' src='/800/600/http/moi-start.ru/images/otobraghenie-tega-pre.jpg'/></noscript>В то время как первый заголовок был основным заголовком всей вашей веб-страницы,этот будет просто заголовком для вашей рецензии на выдуманный блокбастер: <pre><h3><span class="ez-toc-section" id="_Basketball_Dog_2018">Обзор:Basketball Dog (2018)</span></h3></pre></li><li>Теперь добавим текст <strong></strong>. Это основная часть вашего отзыва,так что слов гораздо больше,но обратите внимание,что они по-прежнему заключены в простые теги <code><p></code> ,по одному на каждый отдельный абзац. Добавьте это чуть ниже <code><h2></h2></code> элемент,который вы только что добавили:<pre><p>4 звезды из 5</p><p>Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант). Вам может показаться,что мальчик и его собака,познающие истинную ценность дружбы,звучат знакомо,но этот фильм отличает один важный момент:Ровер играет в баскетбол,и у него это чертовски хорошо получается.</p><p>Возможно,нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени,но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов,а финал заставит любого любителя собак расплакаться.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/6/f/d/6fd6b14ea3e72f97350878c288435bc2.png'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/6/f/d/6fd6b14ea3e72f97350878c288435bc2.png'/></noscript>Если вы любите баскетбол или спортивных питомцев,этот фильм для вас.</p><p>Полный список актеров можно найти на веб-сайте Basketball Dog.</p></pre></li><li>Учитывая,что она является режиссером фильма,кажется,что "Вики Флеминг" может быть самым важным именем в этих абзацах,поэтому давайте выделим его <strong>полужирным шрифтом </strong>,чтобы привлечь к нему больше внимания. Оберните только это имя тегами <code><b></code> и <code></b></code> ,например: <pre><b>Вики Флеминг</b></pre></li><li>Также было бы неплохо отделить звездный рейтинг от остального текста. Выделим <strong>курсивом </strong>,чтобы отделить его. Оберните только эти слова цифрой <code><i></code>и <code></i></code>теги,например:<pre><p><i>4 из 5 звезд</i></p></pre></li></ol><p>После того,как вы все это сделали,ваш полный код должен выглядеть так:</p><pre><html><тело><h2><span class="ez-toc-section" id="i-57">Обзоры киноклассики</span></h2><h3><span class="ez-toc-section" id="_2018">Обзор:Баскетбольная собака (2018 г.)</span></h3><p><i>4 звезды из 5</i></p><p>Режиссер <b>Вики Флеминг</b>рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровере (озвучивает Бринсон Ламблбрант).<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/7/f/4/7f4623f196af4c7a1c9916626c3107c7.jpeg'/><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/7/f/4/7f4623f196af4c7a1c9916626c3107c7.jpeg'/></noscript>Вам может показаться,что мальчик и его собака,познающие истинную ценность дружбы,звучат знакомо,но этот фильм отличает один важный момент:Ровер играет в баскетбол,и у него это чертовски хорошо получается.</p><p>Возможно,нет необходимости включать все 150 минут игры чемпионата Ровера в режиме реального времени,но Basketball Dog будет удерживать ваш интерес на протяжении всех 4 часов,а финал заставит любого любителя собак расплакаться. Если вы любите баскетбол или спортивных питомцев,этот фильм для вас.</p><p>Полный список актеров можно найти на веб-сайте Basketball Dog.</p></тело></html></pre><p>Дважды щелкните файл <strong>index.html </strong>,чтобы загрузить его в браузере,и вы должны увидеть это. Ваша веб-страница начинает выглядеть как настоящая веб-страница! </p>Продолжать <p data-readability-styled="true">Предыдущий:Создать веб-страницу </p><p data-readability-styled="true">Далее:Списки в HTML </p><p>/en/basic-html/lists-in-html/content/</p><h2><span class="ez-toc-section" id="_HTML-10">Основные команды HTML </span></h2>Основные команды HTML <hr/><p>В этом разделе рассматриваются некоторые основные HTML-команды и объясняются шаги,связанные с подготовкой документа для просмотра через World Wide Web (www) с помощью Netscape Navigator или Internet Explorer.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/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/W9heyaTR1rIxg5NzKCPfBuqQo0SL4cndF8XvAZ/slide-5.jpg'/><noscript><img loading='lazy' src='/800/600/http/cf.ppt-online.org/files/slide/w/W9heyaTR1rIxg5NzKCPfBuqQo0SL4cndF8XvAZ/slide-5.jpg'/></noscript></p><p>HTML использует теги,чтобы сообщить клиенту (браузеру),как отображать текст и изображения. Теги содержатся в <<b></b>>символы. В большинстве случаев вы начинаете с начального тега,вставляете слово или слова,которые будут затронуты этим тегом,и в конец строки слов,вы помещаете закрывающий тег. </p><p>Например,чтобы создать заголовок для документа,вы должны сделать далее:</p><pre><title>Мой первый HTML-документ</title></pre><p>Закрывающий тег обычно содержит «/» перед директива,указывающая на прекращение действия. </p><p>Теги HTML не чувствительны к регистру,в отличие от URL-адресов. В большинстве случаев (за исключением предварительно отформатированного текста) HTML сворачивает множество пробелов в один пробел и не читает пустые строки. Однако,когда вы пишете свой текст,вы должны оставить несколько пустых линии между абзацами,чтобы сделать редактирование исходного HTML документ проще. </p><hr/><h4><span class="ez-toc-section" id="_HTML-11">Тег HTML </span></h4><p>Хотя в настоящее время требуется не для всех клиентов,<html>тег указывает точку,с которой текст должен начать интерпретироваться как HTML-код.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/tods-blog.com.ua/wp-content/uploads/2022/06/othercomments1.jpg'/><noscript><img loading='lazy' src='/800/600/http/tods-blog.com.ua/wp-content/uploads/2022/06/othercomments1.jpg'/></noscript>Возможно,будет хорошей идеей включить его во все ваши документов сейчас,поэтому вам не нужно возвращаться к своим файлам и добавлять это позже. </p><p>Тег <html>обычно размещается в первой строке ваш документ. В конце вашего документа вы должны закрыть с тег </html>. </p><hr/><h4><span class="ez-toc-section" id="i-58">Бирка для головы </span></h4><p>Так же,как и заголовок служебной записки,заголовок HTML-документа содержит специальную информацию,например название. Глава документ разграничен <head>и </head>соответственно. </p><p>Для целей этого класса только тег заголовка ниже,должны быть включены в заголовок документа. Типичная головная часть может выглядеть как </p><pre><html><голова><title>Мой первый HTML-документ</title></голова></pre><hr/><h4><span class="ez-toc-section" id="i-59">Титулы </span></h4><p>Тег заголовка позволяет указать <i>Заголовок документа </i>в окно вашего браузера. Когда люди составляют горячие списки,этот заголовок что они увидят в своем списке после добавления вашего документа. формат:</p><pre><title>Мой первый HTML-документ</title></pre><p>Помните,заголовок обычно не отображается в документе само по себе,а в поле заголовка или на панели в верхней части окна.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/96912536/original/1e3d46ea3489388dfc95bf4f335f48842e55412e/design-responsive-html-html5-website.png'/><noscript><img loading='lazy' src='/800/600/http/fiverr-res.cloudinary.com/images/t_main1,q_auto,f_auto,q_auto,f_auto/gigs/96912536/original/1e3d46ea3489388dfc95bf4f335f48842e55412e/design-responsive-html-html5-website.png'/></noscript></p><hr/><h4><span class="ez-toc-section" id="i-60">Бирка для тела </span></h4><p>Как и следовало ожидать,теги тела <body>и </body>определить начало и конец большей части документа. Все ваш текст,изображения и ссылки будут в теле документа. </p><p>Тело должно начинаться после головы. Типичная страница может начни как </p><pre><html><голова><title>Мой первый HTML-документ</title></голова><тело></pre><hr/><h4><span class="ez-toc-section" id="i-61">Коллекторы </span></h4><p>Существует до шести уровней заголовков,которые можно использовать в вашем документ,от h2 до h6. Заголовок 1 является самым большим заголовком,и они постепенно уменьшаться в заголовке 6. Ниже приведены все шесть заголовков и как они обычно выглядят по отношению к одному еще один. </p><pre><h2><span class="ez-toc-section" id="_1">Это тег заголовка 1</span></h2></pre><pre><h3><span class="ez-toc-section" id="_2">Это тег заголовка 2</span></h3></pre><h3><span class="ez-toc-section" id="_2-2">Это тег заголовка 2 </span></h3><pre><h4><span class="ez-toc-section" id="_3-2">Это тег заголовка 3</span></h4></pre><h4><span class="ez-toc-section" id="_3-3">Это тег заголовка 3 </span></h4><pre><h5><span class="ez-toc-section" id="_4">Это тег заголовка 4</span></h5></pre><h5><span class="ez-toc-section" id="_4-2">Это тег заголовка 4 </span></h5><pre><h5><span class="ez-toc-section" id="_5">Это тег заголовка 5</span></h5></pre><h5><span class="ez-toc-section" id="_5-2">Это тег заголовка 5 </span></h5><pre><h6><span class="ez-toc-section" id="_6">Это тег заголовка 6</span></h6></pre><h6><span class="ez-toc-section" id="_6-2">Это тег заголовка 6 </span></h6><p>Заголовки,как вы заметили,не только различаются по размеру,но и жирным шрифтом,а перед и после них вставляются пустые строки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/a/1/5/a150b5ee7663b7f560461871b59b13bd.jpeg'/><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/a/1/5/a150b5ee7663b7f560461871b59b13bd.jpeg'/></noscript>Это важно использовать заголовки только для заголовков,а не только для оформления текста полужирный (позже мы закроем этот тег). </p><hr/><h4><span class="ez-toc-section" id="i-62">Пункты </span></h4><p>В HTML тег абзаца <p>должен быть помещен в конце каждый абзац «нормального» текста (нормальный определяется поскольку с ним еще не связан тег). </p><dl><dd><p>вызывает разрыв строки и добавляет завершающий пробел строка </dd><dd><br>вызывает разрыв строки без пробела в конце строка </dd></dl><p>Для удобства <em></em>себе и другим,кто может нужно редактировать ваши документы HTML,это <strong>очень </strong>хорошая идея поместить две или три пустые строки между абзацами,чтобы облегчить редактирование. </p><hr/><h4><span class="ez-toc-section" id="i-63">Предварительно отформатированный текст </span></h4><p>Тег предварительно отформатированного текста позволяет включать текст в документ,который обычно остается шрифтом фиксированной ширины и сохраняет пробелы,строки и табуляции исходного документа. В других слова,он оставляет ваш текст таким,каким он появился изначально или таким,каким вы его ввел его.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/fuzeservers.ru/wp-content/uploads/a/d/8/ad85696ea4e6a001da8a4f05faf49927.png'/><noscript><img loading='lazy' src='/800/600/http/fuzeservers.ru/wp-content/uploads/a/d/8/ad85696ea4e6a001da8a4f05faf49927.png'/></noscript>Большинство клиентов сворачивают несколько пробелов в один пробел,даже вкладки свернуты в один пробел. Единственный способ обойти это использовать предварительно отформатированный тег. Визуально отформатированный текст похоже на курьерский шрифт. </p><pre><pre>это пример предварительно отформатированного текстовый тег</pre></pre><p>И вот как это отображается:</p><pre>это пример предварительно отформатированного текстовый тег </pre><hr/><h4><span class="ez-toc-section" id="i-64">Жирный шрифт и курсив </span></h4><p>Вы можете выделить текст,используя полужирный шрифт и курсив. теги или акцент и сильные теги. </p><p>Также есть тег подчеркивания,но большинство людей не используют это потому,что текст,на который ссылаются,часто подчеркивается. потенциал за путаницу и архаичность подчеркивания вообще сделать его плохим маркером для акцента. </p><p>При использовании этих тегов вы обычно не можете (и,вероятно,должны нет) иметь текст,выделенный жирным шрифтом и курсивом;последний тег обычно встречается отображаемый тег.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/wikihow.com/images/thumb/e/ed/Create-a-Simple-Web-Page-With-HTML-Step-9-Version-6.jpg/aid4082-v4-728px-Create-a-Simple-Web-Page-With-HTML-Step-9-Version-6.jpg'/><noscript><img loading='lazy' src='/800/600/http/wikihow.com/images/thumb/e/ed/Create-a-Simple-Web-Page-With-HTML-Step-9-Version-6.jpg/aid4082-v4-728px-Create-a-Simple-Web-Page-With-HTML-Step-9-Version-6.jpg'/></noscript>Например,если у вас был жирный тег,за которым сразу же следовал курсивный тег,отмеченное слово будет выделено курсивом. </p><dl><dt><strong>Физические метки </strong></dt><dd>Это тег <b>жирный</b>. </dd><dd>Так выглядит <b>,выделенный жирным шрифтом </b>. </dd><dd>Это тег <i>курсив</i>. </dd><dd>Так выглядит <i>курсив </i>. </dd><dt><strong>Логические теги </strong></dt><dd>Это <strong>сильно выделенный</strong>ярлык. </dd><dd>Это сильно выделенный тег <strong></strong>. </dd><dd>Это <em>выделенный</em>тег. </dd><dd>Это выделенный тег <em></em>. </dd></dl><p>Существует тонкое различие между приведенным выше «физическим» теги,которые просто изменяют отображаемый шрифт,и "логические" стили,которые используются (или со временем будут использоваться) для создания типов подчеркните специфику клиента (например,с помощью тега <em>сделает текст красным). Хотя любой стиль подходит,имейте в виду,что различия в этих двух типах тегов могут быть более очевидными с прогресс в HTML.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/1.bp.blogspot.com/-iwn96cMqXe0/UM8ltAlBjnI/AAAAAAAAB2U/UdWZmfsDts0/w1200-h630-p-k-no-nu/combo+box+auto+input+text.png'/><noscript><img loading='lazy' src='/800/600/http/1.bp.blogspot.com/-iwn96cMqXe0/UM8ltAlBjnI/AAAAAAAAB2U/UdWZmfsDts0/w1200-h630-p-k-no-nu/combo+box+auto+input+text.png'/></noscript></p><hr/><h4><span class="ez-toc-section" id="i-65">Списки </span></h4><p>В HTML есть простой способ иметь нумерованные,ненумерованные и списки определений. Кроме того,вы можете вкладывать списки в списки. </p><p>При использовании списков вы не можете контролировать количество места между маркером или номером списка,HTML автоматически делает это для тебя. Также (пока) у вас нет контроля над тем,какой тип будет использоваться маркер,так как каждый браузер отличается. </p><p><strong>Ненумерованные списки </strong></p><blockquote><p>Ненумерованные списки начинаются с тега <ul>,за которыми следуют фактические элементы списка,отмеченные значком Тег <li>. Список завершается закрывающим тегом </ul>. </p><p>Например,вот ненумерованный список из трех элементов:</p><pre><ул><li>элемент списка 1 <li>элемент списка 2 <li>элемент списка 3 </ul></pre><p>Вот как будет отображаться этот список:</p><ul><li>элемент списка 1 </li><li>элемент списка 2 </li><li>элемент списка 3 </li></ul></blockquote><p><strong>Нумерованные списки </strong></p><blockquote><p>Вот тот же список,но в формате нумерованного списка:</p><pre><ол><li>элемент списка 1 <li>элемент списка 2 <li>элемент списка 3 </ol></pre><p>Вот как будет отображаться этот список:</p><ol><li>элемент списка 1 </li><li>элемент списка 2 </li><li>элемент списка 3 </li></ol></blockquote><p><strong>Списки определений </strong></p><blockquote><p>Списки определений позволяют делать отступы без необходимости приходится использовать пули.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/helpset.ru/wp-content/uploads/2013/03/offet_webpage.jpg'/><noscript><img loading='lazy' src='/800/600/http/helpset.ru/wp-content/uploads/2013/03/offet_webpage.jpg'/></noscript></p><pre><дл><dt>Это термин <dd>Это определение <dd>И еще одно определение <dt>Другой термин <dd>Другое определение </dl></pre><p>А вот как это будет отображаться </p><dl><dt>Это термин </dt><dd>Это определение. </dd><dd>И еще одно определение. </dd><dt>Другой термин </dt><dd>Другое определение </dd></dl></blockquote><p><strong>Вложенные списки </strong></p><blockquote><p>Наконец,вот вложенный список внутри ненумерованного списка (мы мог бы просто иметь вложенный список в пронумерованном список). </p><pre><ул><li>элемент списка 1 <ул><li>вложенный элемент 1 <li>вложенный элемент 2 </ul><li>элемент списка 2 <ул><li>вложенный элемент 1 <li>вложенный элемент 2 </ul><li>элемент списка 3 <ул><li>вложенный элемент 1 <li>вложенный элемент 2 </ul></ul></pre><p>Вот как будет отображаться этот список:</p><ul><li>элемент списка 1 <ul><li>вложенный элемент 1 </li><li>вложенный элемент 2 </li></ul></li><li>элемент списка 2 <ul><li>вложенный элемент 1 </li><li>вложенный элемент 2 </li></ul></li><li>элемент списка 3 <ul><li>вложенный элемент 1 </li><li>вложенный элемент 2 </li></ul></li></ul></blockquote><hr/><h4><span class="ez-toc-section" id="i-66">Цитата </span></h4><p>Тег цитаты делает отступ текста (как слева,так и справа) внутри тегов.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/luxe-host.ru/wp-content/uploads/a/b/a/abab610defc20643e7d5a7081c60ea62.jpeg'/><noscript><img loading='lazy' src='/800/600/http/luxe-host.ru/wp-content/uploads/a/b/a/abab610defc20643e7d5a7081c60ea62.jpeg'/></noscript>Тег цитаты выглядит так:</p><pre><blockquote>...</blockquote></pre><p>и отображается так:</p><blockquote><p>Текст в блочных кавычках часто используется для отступа больших блоков текста. текст,например цитаты. Текст будет иметь отступ до тех пор,пока встречается закрывающий тег. Опять же,обратите внимание,что текст здесь с отступом как слева,так и справа. </p></blockquote><hr/><h4><span class="ez-toc-section" id="i-67">Центр </span></h4><p>Вы можете центрировать текст,изображения и заголовки с помощью тега center:</p><pre><center>Это предложение расположено по центру</center></pre><p align="center">Это центрированное предложение. </p><p>Центральный тег автоматически вставляет разрыв строки после закрывающий центральный тег. </p><hr/><h4><span class="ez-toc-section" id="i-68">Горизонтальная линейка </span></h4><p>Чтобы разделить разделы в документе,вы можете вставить тег горизонтальной линейки <hr>. Горизонтальная линейка отображается как следует:</p><hr/><h4><span class="ez-toc-section" id="i-69">Адреса </span></h4><p>Тег <address>обычно появляется в конце документа и чаще всего используется для обозначения информации на связаться с автором или учреждением,предоставившим это Информация.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/otvet.imgsmail.ru/download/21497032_492856111e952ec939c24b81ceee725c_800.jpg'/><noscript><img loading='lazy' src='/800/600/http/otvet.imgsmail.ru/download/21497032_492856111e952ec939c24b81ceee725c_800.jpg'/></noscript>Все,что содержится в теге адреса,появляется в курсив. Тег адреса — еще один пример логического тега. хотя в настоящее время он ничего не делает,кроме отображения текста в курсив,это может измениться по мере развития HTML-кода. </p><p>Вот пример того,как может выглядеть адрес:</p><pre><адрес>Введение в HTML/Пэт Андрогет/Pat_Androget@ncsu.edu </адрес></pre><p>И это будет выглядеть как:</p><address>Введение в HTML/Пэт Андрогет/Pat_Androget@ncsu.edu </address><hr/><h4><span class="ez-toc-section" id="i-70">Комментарии </span></h4><p>Можно включать комментарии в исходный документ HTML которые не отображаются при просмотре через браузер. Это самое полезно для предупреждения и специальных инструкций для будущих редакторы вашего документа. </p><p>Комментарии имеют вид:</p><pre></pre><p>Комментарий может разбивать даже строки </p><pre></pre><hr/><h4><span class="ez-toc-section" id="i-71">Зачеркнутый </span></h4><p>Если хотите,есть перечеркнутый тег,который отображает текст со страйком.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/i.stack.imgur.com/mPxE9.png'/><noscript><img loading='lazy' src='/800/600/http/i.stack.imgur.com/mPxE9.png'/></noscript></div></div></div></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://xn--90abhccf7b.xn--p1ai/raznoe/majl-pochta-novaya-registracziya-pochta-mail-ru-besplatnyj-i-bezopasnyj-elektronnyj-pochtovyj-yashhik.html" rel="prev">Майл почта новая регистрация:Почта Mail.ru —бесплатный и безопасный электронный почтовый ящик</a></div><div class="nav-next"><a href="https://xn--90abhccf7b.xn--p1ai/raznoe/fon-dlya-dizajna-skachat-kartinkifondizajna-stokovye-fotofondizajna-v-horoshem-kachestve.html" rel="next">Фон для дизайна:⬇ Скачать картинки D1 84 d0 be d0 bd d0 b4 d0 b8 d0 b7 d0 b0 d0 b9 d0 bd d0 b0,стоковые фото D1 84 d0 be d0 bd d0 b4 d0 b8 d0 b7 d0 b0 d0 b9 d0 bd d0 b0 в хорошем качестве</a></div></div></nav><div id="comments" class="comments-area"><div id="respond" class="comment-respond"><h3 id="reply-title" class="comment-reply-title">Добавить комментарий <small><a rel="nofollow" id="cancel-comment-reply-link" href="/html/html-kak-vyvesti-html-kod-kak-otobrazit-html-kod-na-html-stranicze.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://xn--90abhccf7b.xn--p1ai/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='24051' id='comment_post_ID'/><input type='hidden' name='comment_parent' id='comment_parent' value='0'/></p></form></div></div></main></div><div id="sidebar-primary" class="widget-area sidebar " role="complementary"><div class="sidebar-main"><div id="yandex_rtb_R-A-744004-7" class="yandex-adaptive classYandexRTB"></div> <script type="text/javascript"> window.yaContextCb.push(()=>{Ya.Context.AdvManager.render({renderTo: "yandex_rtb_R-A-744004-7",blockId: "R-A-744004-7",pageNumber: 11,onError: (data) => { var g = document.createElement("ins"); g.className = "adsbygoogle"; g.style.display = "inline"; g.style.width = "300px"; g.style.height = "600px"; g.setAttribute("data-ad-slot", "9935184599"); g.setAttribute("data-ad-client", "ca-pub-1812626643144578"); g.setAttribute("data-alternate-ad-url", "https://chajnov.ru/back.php"); document.getElementById("yandex_rtb_[rtbBlock]").appendChild(g); (adsbygoogle = window.adsbygoogle || []).push({}); }})}); window.addEventListener("load", () => { var ins = document.getElementById("yandex_rtb_R-A-744004-7"); if (ins.clientHeight == "0") { ins.innerHTML = stroke2; } }, true); </script> <section id="search-2" class="widget widget_search"><div class="zita-widget-content"><form role="search" method="get" id="searchform" action="https://xn--90abhccf7b.xn--p1ai/"><div class="form-content"><input type="text" placeholder="search.." name="s" id="s" value=""/><input type="submit" value="Search"/></div></form></div></section><section id="nav_menu-4" class="widget widget_nav_menu"><div class="zita-widget-content"><h2 class="widget-title">Рубрики</h2><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-19021" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19021"><a href="https://xn--90abhccf7b.xn--p1ai/category/css">Css</a></li><li id="menu-item-19022" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-19022"><a href="https://xn--90abhccf7b.xn--p1ai/category/html">Html</a></li><li id="menu-item-19023" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19023"><a href="https://xn--90abhccf7b.xn--p1ai/category/js">Js</a></li><li id="menu-item-19024" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19024"><a href="https://xn--90abhccf7b.xn--p1ai/category/adaptiv">Адаптивный сайт</a></li><li id="menu-item-19025" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19025"><a href="https://xn--90abhccf7b.xn--p1ai/category/verstk">Верстка</a></li><li id="menu-item-19026" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19026"><a href="https://xn--90abhccf7b.xn--p1ai/category/idei">Идеи</a></li><li id="menu-item-19028" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19028"><a href="https://xn--90abhccf7b.xn--p1ai/category/chego-nachat">С чего начать</a></li><li id="menu-item-19029" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19029"><a href="https://xn--90abhccf7b.xn--p1ai/category/sovety">Советы</a></li><li id="menu-item-19031" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19031"><a href="https://xn--90abhccf7b.xn--p1ai/category/shablon">Шаблоны</a></li><li id="menu-item-19027" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-19027"><a href="https://xn--90abhccf7b.xn--p1ai/category/raznoe">Разное</a></li></ul></div></div></section></div></div></div></div><footer id="zita-footer"><div class="footer-wrap widget-area"><div class="bottom-footer"><div class="bottom-footer-bar ft-btm-one"><div class="container"><div class="bottom-footer-container">© Компания <a href="http://вебджем.рф">Вебджем.рф </a>2009 - 2024 | Все права защищены.</a></div></div></div></div></div></footer><style type="text/css">.pgntn-page-pagination{text-align:left !important}.pgntn-page-pagination-block{width:60% !important;padding:0}.pgntn-page-pagination a{color:#1e14ca !important;background-color:#fff !important;text-decoration:none !important;border:1px solid #ccc !important}.pgntn-page-pagination a:hover{color:#000 !important}.pgntn-page-pagination-intro,.pgntn-page-pagination .current{background-color:#efefef !important;color:#000 !important;border:1px solid #ccc !important}.archive #nav-above,.archive #nav-below,.search #nav-above,.search #nav-below,.blog #nav-below,.blog #nav-above,.navigation.paging-navigation,.navigation.pagination,.pagination.paging-pagination,.pagination.pagination,.pagination.loop-pagination,.bicubic-nav-link,#page-nav,.camp-paging,#reposter_nav-pages,.unity-post-pagination,.wordpost_content .nav_post_link,.page-link,.page-links,#comments .navigation,#comment-nav-above,#comment-nav-below,#nav-single,.navigation.comment-navigation,comment-pagination{display:none !important}.single-gallery .pagination.gllrpr_pagination{display:block !important}</style><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://xn--90abhccf7b.xn--p1ai/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><script src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" data-cf-settings="58b15bd4b784edcf82036c6e-|49" defer></script>