Начало html кода: Структура кода | htmlbook.ru - Блог сумасшедшего сисадмина

Содержание

Структура документа и веб-сайта — Изучение веб-разработки

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

Необходимые знания:	Базовое знакомство с HTML, описано в разделе Начало работы с HTML. Форматирование текста в HTML, описано в разделе Основы текста в HTML. Как работают гиперссылки, описано в разделе Создание гиперссылок.
Задача:	Изучить, как структурировать документ с помощью семантических тегов и как разработать структуру простого веб-сайта.

Веб-страницы могут и будут отличаться друг от друга, но все они, преимущественно, состоят из аналогичных стандартных компонентов, если только страница не отображает полноэкранное видео или игру, не является частью какого-либо художественного проекта или просто плохо структурирована:

Заголовок (колонтитул): Обычно это большая полоса вверху страницы, с крупным заголовком и / или логотипом. Здесь указывается общая информация о веб-сайте, не меняющаяся от страницы к странице.
Навигационное меню: Ссылки на основные разделы сайта; обычно в виде кнопок, ссылок или вкладок. Также как и заголовок, навигация остается неизменной на всех страницах сайта — наличие непоследовательной навигации на Вашем сайте запутает и разочарует пользователей. Многие веб-дизайнеры считают панель навигации частью заголовка, а не отдельным компонентом, но это не является обязательным требованием; на самом деле, некоторые также утверждают, что их разделение на отдельные компоненты улучшает доступность, поскольку раздельная структура будет понятнее для людей, пользующихся считывателями экрана.
Основное содержимое: Большая область в центре страницы, содержащая, в основном, уникальный контент данной веб-страницы, например видео, которое вы хотите посмотреть, или рассказ, который вы читаете, или карту, которую вы хотите просмотреть, или заголовки новостей и т. д. Это одна из частей сайта, которая определенно будет меняться от страницы к странице!
Боковая панель: Как правило, содержит некоторую второстепенную информацию, ссылки, цитаты, рекламу и т. д. Обычно она относится к содержимому в основном контенте (например, на странице со статьей, боковая панель может содержать биографию автора или ссылки на связанные статьи), но в некоторых случаях здесь размещают и другие элементы, например, вторичную навигационную систему.
Нижний колонтитул (футер): Полоса в нижней части страницы, которая обычно содержит уведомления об авторских правах или контактную информацию. Это место для размещения общей информации (например, заголовка), но обычно эта информация не является критичной или вторична для самого веб-сайта. Нижний колонтитул также иногда используется для SEO целей, предоставляя ссылки для быстрого доступа к популярному контенту.

«Типичный веб-сайт» может быть структурирован примерно так:

Пример, показанный сверху, не красив и примитивен, но идеально подходит для иллюстрирования типичного макета веб-сайта. У некоторых веб-сайтов больше колонок, некоторые — более сложные, но идею Вы поняли. С правильным CSS Вы могли бы использовать практически любые элементы для обёртывания различных разделов и стилизовать их так, как Вам хочется, но, как обсуждалось ранее, нам нужно уважать семантику и

использовать правильный элемент для правильной работы.

Это потому, что визуальные эффекты — это ещё не самое главное. Мы используем цвет и размер шрифта для привлечения внимания посетителей к наиболее полезным частям содержимого, такого как навигационное меню или связанные ссылки, но что насчет людей со слабым зрением, к примеру, для которых концепция «розового» и «большого шрифта» не будет полезной?

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

Для реализации такой семантической разметки HTML предоставляет выделенные теги, которые можно использовать для создания таких разделов, например:

Заголовок: <header>.
Навигационное меню: <nav>.
Основное содержимое: <main>, с различными подразделами содержимого, представленными элементами <article>, <section> и <div>.
Боковая панель: <aside>, обычно располагается внутри <main>.
Нижний колонтитул: <footer>.

Активное обучение: исследование кода для нашего примера

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

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">

    <title>Заголовок моей страницы</title>
    <link href="https://fonts. googleapis.com/css?family=Open+Sans+Condensed:300|Sonsie+One" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="style.css">

    
    
  </head>

  <body>
    

    <header>
      <h2>Заголовок</h2>
    </header>

    <nav>
      <ul>
        <li><a href="#">Домашняя страница</a></li>
        <li><a href="#">Наша команда</a></li>
        <li><a href="#">Проекты</a></li>
        <li><a href="#">Контакты</a></li>
      </ul>

       

       <form>
         <input type="search" name="q" placeholder="Search query">
         <input type="submit" value="Go!">
       </form>
     </nav>

    
    <main>

      
      <article>
        <h3>Заголовок статьи</h3>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Donec a diam lectus. Set sit amet ipsum mauris.    Maecenas congue ligula as quam viverra nec consectetur ant hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue. Nam tincidunt congue enim, ut porta lorem lacinia consectetur.</p>

        <h4>Подраздел</h4>

        <p>Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id dolor.</p>

        <p>Pelientesque auctor nisi id magna consequat sagittis. Curabitur dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed odio eros.</p>

        <h4>Ещё один подраздел</h4>

        <p>Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum soclis natoque penatibus et manis dis parturient montes, nascetur ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem facilisis semper ac in est.  </p>

        <p>Vivamus fermentum semper porta. Nunc diam velit, adipscing ut tristique vitae sagittis vel odio. Maecenas convallis ullamcorper ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi diam iaculis velit, is fringille sem nunc vet mi.</p>
      </article>

      
      <aside>
        <h3>Связанные темы</h3>

        <ul>
          <li><a href="#">Мне нравится стоять рядом с берегом моря</a></li>
          <li><a href="#">>Мне нравится стоять рядом с морем</a></li>
          <li><a href="#">Даже на севере Англии</a></li>
          <li><a href="#">Здесь не перестаёт дождь</a></li>
          <li><a href="#">Лаааадно...</a></li>
        </ul>
      </aside>

    </main>

    

    <footer>
      <p>©Авторские права никому не принадлежат, 2050. Все права защищены.   </p>
    </footer>

  </body>
</html>

Потратьте некоторое время, чтобы просмотреть код и понять его — комментарии внутри кода также помогут Вам в этом. Мы не просим Вас делать ничего больше в этом уроке, потому что ключ к пониманию макета документа заключается в написании осмысленной структуры HTML, а затем её развёртывании с помощью CSS. Мы подождем, пока вы не начнете изучать CSS-макет как часть темы CSS.

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

<main> предназначен для содержимого, уникального для этой страницы. Используйте <main> только один раз на странице и размещайте прямо внутри <body>. В идеале он не должен быть вложен в другие элементы.
<article> окружает блок связанного содержимого, который имеет смысл сам по себе без остальной части страницы (например, один пост в блоге).
<section> подобен <article>, но больше подходит для группирования одной части страницы, которая представляет собой одну часть функциональности (например, мини-карту или набор заголовков статей и сводок). Считается хорошей практикой начинать каждый раздел с заголовка. Также обратите внимание, что в зависимости от контекста вы можете разбить <article> на несколько <section> или, наоборот, <section> на несколько <article>.
<aside> содержит контент, который не имеет прямого отношения к основному содержимому, но может содержать дополнительную информацию, косвенно связанную с ним (словарь, биография автора, связанные ссылки и т. д.).
<header> представляет собой группу вводного содержимого. Если он дочерний элемент <body>, то он определяет глобальный заголовок веб-страницы, но если он дочерний элемент <article> или <section>, то определяет конкретный заголовок для этого раздела (постарайтесь не путать его с titles и headings).
<nav> содержит основные функции навигации для страницы. Так же часто в нем можно увидеть логотип и / или название сайта или компании. Вторичные ссылки и т. д. не входят в навигацию.
<footer> представляет собой группу конечного контента для страницы.

Несемантические обертки

Иногда Вы будете сталкиваться с ситуацией, когда Вы не можете найти идеальный семантический элемент, чтобы сгруппировать некоторые элементы вместе или обернуть некоторый контент. Иногда Вам просто нужно будет сгруппировать несколько элементов вместе, чтобы применить к ним, как к единой сущности, CSS или JavaScript. Для таких случаев в HTML есть элементы <div> и <span>. Вам следует использовать их с подходящим значением атрибута class или id, чтобы можно было легко получить к ним доступ.

<span> — это строчный несемантический элемент, который стоит использовать только если Вы не можете подобрать более подходящий семантический текстовый элемент для обёртывания контента или если не хотите добавлять какие-либо конкретные значения. Например:

<p>Пьяный Король возвратился в свою комнату в 01:00
и всё никак не мог войти в дверь: хмель мешал <span>[Примечание редактора: В этот момент
свет на сцене должен быть приглушён]</span>.</p>

В этом примере примечание редактора просто сообщает дополнительные пожелания режиссёру пьесы. В нем нет особого семантического значения. Для слабовидящих пользователей, возможно, примечание будет отделено от основного содержимого с помощью CSS.

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

<div>
  <h3>Корзина</h3>
  <ul>
    <li>
      <p><a href=""><strong>Silver earrings</strong></a>: $99.95.</p>
      <img src="../products/3333-0985/thumb.png" alt="Серебряные серьги">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>Итого: $237.89</p>
</div>

Ему не подходит <aside>, поскольку это не обязательно относится к основному содержимому страницы (Вы хотите, чтобы его можно было просматривать из любого места). Также не подходит и <section>, т. к. это не часть основного содержимого страницы. Поэтому <div> подходит в этом случае. Мы включили заголовок в качестве указателя, чтобы помочь пользователям программ чтения с экрана в его поиске.

Внимание: div настолько просто использовать, что легко переборщить. Поскольку они не несут никакого семантического значения, они просто загромождают Ваш HTML-код. Старайтесь использовать их только тогда, когда нет лучшего семантического решения, и постарайтесь свести их использование к минимуму, иначе Вам будет трудно обновлять и поддерживать Ваши документы.

Перенос строки и горизонтальный разделитель

Два элемента, которые Вы будете периодически использовать или захотите узнать о них: <br> и <hr>:

<br> создает разрыв строки в абзаце, и это единственный способ изменить жёсткую структуру в ситуации, когда Вам нужна серия фиксированных коротких строк, например, в почтовом адресе или стихотворении. Пример:

<p>Жила-была девчушка Нелл,<br>
Любившая писать HTML:<br>
Её семантика ужасна была — <br>
Она и сама прочитать ничего не могла.</p>

Без элемента <br> абзац разместится в одну длинную линию (как было сказано ранее, HTML игнорирует переносы строк), а с ним в коде — разметка будет выглядеть следующим образом:

Жила-была девчушка Нелл,
Любившая писать HTML:
Её семантика ужасна была —
Она и сама прочитать ничего не могла.

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

<p>Рон был зажат в углу адскими тварями. Он боялся, но твёрдо решил защитить своих друзей, поднял свою волшебную палочку и приготовился к битве, надеясь, что справится со своим несчастьем.</p>
<hr>
<p>Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: "Думаю, самое время вернуться к работе".</p>

Будет выглядеть примерно так:

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

Тем временем Гарри сидел дома с раскрытым указом и размышлял о том, когда выйдут новые серии спин-оффов; в это время зачарованное письмо пархнуло в окно и приземлилось у него на коленях. Он прочитал его и подскочил на ноги; он подумал: «Думаю, самое время вернуться к работе».

Когда вы уже спланировали содержание одной веб-страницы, следующий логический шаг — продумать содержание всего веб-сайта: какие страницы нужны, как они будут устроены и связаны друг с другом для лучшего восприятия пользователем. Это называется Information architecture. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

Имейте в виду, что у вас будет несколько элементов, общих для большинства (если не всех) страниц — например, меню навигации и содержимого нижнего колонтитула. Например, для сайта компании хорошая идея разместить контактные данные в нижнем колонтитуле на каждой странице. Составьте список элементов, общих для всех страниц.
Теперь набросайте структуру страниц (можно взять за образец наш простой дизайн, приведенный раннее). Что находится в этих блоках?
Теперь составьте список остальной (уникальной для каждой страницы) информации, которую вы разместите на сайте.
Сгруппируйте информацию по темам. Какие части можно разместить на одной странице? Это похоже на метод Card sorting.
Составьте карту сайта. Обведите каждую страницу рамкой, и продумайте перемещения пользователя между ними. Обычно в центре оказывается главная страница, с которой можно быстро перейти на все остальные. На небольшом сайте большинство страниц помещают в главную навигацию, но не обязательно класть туда все ссылки. Также можете пометить, как выглядят элементы страниц — ссылками, списками, карточками.

Самостоятельная работа: создайте свою собственную карту сайта

Приментие наш метод к своему сайту. О чем он будет?

Примечание: Сохраните свой код, он Вам ещё понадобится.

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

Using HTML sections and outlines: Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.

HTML Программный код

Надписи, выполненные моноширинными шрифтами, создаются с помощью тегов <code>, <kbd> и <samp>. Результаты применения этих тегов обычно идентичны: моноширинный шрифт с фиксированным размером символов и интервалов.

Тег

<code>

Тег <code> — cтрочный элемент-контейнер, который применяется для вставки в него небольших фрагментов программного кода, например, в веб-документе, представляющем учебное пособие по программированию. Браузеры отображают такой код моноширинным шрифтом (например, Courier New). Если использовать ero совместно с элементом <pre>, то можно сохранить исходное форматирование кода.

Тег <pre> служит для ввода текста без форматирования, то есть с сохранением всех пробелов, табуляций и переносов строк. Внутри этого элемента можно применять большинство элементов форматирования текста.

Внимание: В языке HTML переносы строк, идущие подряд пробелы и табуляции игнорируются. Несколько пробелов подряд воспринимаются как один пробел.

Пример: использования элементов

<pre> и <code>

Внутри элемента <pre> браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.

if (document.getElementsByClassName) {
    x = document.getElementsByClassName("pagination")
    if ( x.length>y) {
      x.style.visibility = "hidden";
  }

Внутри элемента «pre» браузер дублирует каждый встреченный пробел или перенос строки, сохраняя ваше исходное форматирование.

<pre>
<code>
if (document.getElementsByClassName) {
    x = document.getElementsByClassName("pagination")
    if ( x.length>y) {
      x.style.visibility = "hidden";
  }
</code>
</pre>

Тег <kbd> отмечает фрагмент кода как вводимый пользователем с клавиатуры. Некоторые браузеры помечают такой текст дополнительным фоном.
Тег <samp> применяется для формирования компьютерного вывода, например, текста, отображаемого в консольном окне после ввода вами управляющего сценария. Этот редко используемый элемент просто выводит свое содержимое моноширинным шрифтом, как <kbd>, <pre>, <code>.

Пример: элементы

<kbd> и <samp>

Текст, который пользователь должен ввести с клавиатуры поместите
в элемент-контейнер «kbd».

Введите текст: Это — текст, вводимый с клавиатуры

Это — текст, который помещен в контейнер «samp»


<p>Текст, который пользователь должен ввести с клавиатуры поместите в
элемент-контейнер «kbd».</p>
<p>Введите текст: <kbd>Это — текст, вводимый с клавиатуры</kbd></p>
<p><samp>Это — текст, который помещен в контейнер «samp»</samp></p>

Тег

<var>

Тег <var> используется с целью дополнительного выделения переменных в программном коде. Он определяет переменную в математическом выражении или параметр программы и обычно отображается курсивом.

Пример: элементы

<var>

Кинетическая энергия тела:

W_к = mv²/2


<p>Кинетическая энергия тела:</p>
<p><var>W</var><sub>к</sub> = <var>m</var><var>v</var><sup>2</sup>/2</p>

Задачи
Итоговое задание
[21-24]
На этом уроке вы познакомились с тегами, которые выводит свое содержимое моноширинным шрифтом, выделяют в коде переменные и тегом предварительного форматирования. Все они важны при работе с матаматическими выражениями и программным кодом.
Пришло время повторить изученное и выполнить три несложных задания:
Переменная
Используя html-элементы обозначте в приведенном уравнении литеру y как переменную.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Переменная</title> </head> <body> <p>Уравнение параболы y = Nx<sup>2</sup></p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Переменная</title> </head> <body> <p>Уравнение параболы <var>y</var> = Nx<sup>2</sup></p> </body> </html>
Предварительно отформатированный текст
Используя элемент HTML сделайте так, чтобы текст, помещенный в элемент code, отображался браузером с сохранением всех пробелов и переносов строк как есть.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Предварительно отформатированный текст</title> </head> <body> <p>Это бесконечная петля в Visual Basic:</p> <code> Do X = X + 1 Loop Until X
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Предварительно отформатированный текст</title> </head> <body> <p>Это бесконечная петля в Visual Basic:</p> <pre><code> Do X = X + 1 Loop Until X
Программный код
Используя элемент HTML сделайте так, чтобы текст: «function close_menu() {}» отображался браузером как программный код.
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Программный код</title> </head> <body> <p>Это функция: function close_menu() {}</p> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Программный код</title> </head> <body> <p>Это функция: <code>function close_menu() {}</code></p> </body> </html>

Простой пример HTML документа — Учебник по основам HTML
Как устроен HTML-документ
HTML-документ — это просто текстовый файл с расширением *.html (Unix-системы могут содержать файлы с расширением *.htmll). Вот самый простой HTML-документ:
<html> <head> <title>Пример 1</title> </head> <body> <h2>Привет!</h2> <P> Это простейший пример HTML-документа. </P> <P> Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P> </body> </html>
Для удобства чтения я ввел дополнительные отступы, однако в HTML это совсем не обязательно. Более того, браузеры просто игнорируют символы конца строки и множественные пробелы в HTML-файлах. Поэтому наш пример вполне мог бы выглядеть и вот так:
<html> <head> <title>Пример 1</title> </head> <body> <h2>Привет!</h2> <P>Это простейший пример HTML-документа.</P> <P>Этот *.html-файл может быть одновременно открыт и в Notepad, и в Netscape. Сохранив изменения в Notepad, просто нажмите кнопку Reload ('перезагрузить') в Netscape, чтобы увидеть эти изменения реализованными в HTML-документе. </P> </body> </html>
Как видно из примера, вся информация о форматировании документа сосредоточена в его фрагментах, заключенных между знаками «<» и «>». Такой фрагмент (например, <html>) называется меткой (по-английски — tag, читается «тэг»).
Большинство HTML-меток — парные, то есть на каждую открывающую метку вида <tag> есть закрывающая метка вида </tag> с тем же именем, но с добавлением «/».
Метки можно вводить как большими, так и маленькими буквами. Например, метки <body>, <BODY> и <Body> будут восприняты браузером одинаково.
Многие метки, помимо имени, могут содержать атрибуты — элементы, дающие дополнительную информацию о том, как браузер должен обработать текущую метку. В нашем простейшем документе, однако, нет ни одного атрибута. Но мы обязательно встретимся с атрибутами уже в следующем разделе.
Обязательные метки
<html> . .. </html>
Метка <html> должна открывать HTML-документ. Аналогично, метка </html> должна завершать HTML-документ.
<head> … </head>
Эта пара меток указывает на начало и конец заголовка документа. Помимо наименования документа (см. описание метки <title> ниже), в этот раздел может включаться множество служебной информации, о которой мы обязательно поговорим чуть позже.
<title> … </title>
Все, что находится между метками <title> и </title>, толкуется браузером как название документа. Netscape Navigator, например, показывает название текущего документа в заголовке окна и печатает его в левом верхнем углу каждой страницы при выводе на принтер. Рекомендуется название не длиннее 64 символов.
<body> … </body>
Эта пара меток указывает на начало и конец тела HTML-документа, каковое тело, собственно, и определяет содержание документа.
<h2> … </h2> — <H6> … </H6>
Метки вида <Hi> (где i — цифра от 1 до 6) описывают заголовки шести различных уровней. Заголовок первого уровня — самый крупный, шестого уровня, естественно — самый мелкий.
<P> … </P>
Такая пара меток описывает абзац. Все, что заключено между <P> и </P>, воспринимается как один абзац.
Метки <Hi> и <P> могут содержать дополнительный атрибут ALIGN (читается «элайн», от английского «выравнивать»), например:
<h2 ALIGN=CENTER>Выравнивание заголовка по центру</h2>
или
<P ALIGN=RIGHT>Образец абзаца с выравниванием по правому краю</P>
Подытожим все, что мы знаем, с помощью примера 2:
<html> <head> <title>Пример 2</title> </head> <body> <h2 ALIGN=CENTER>Привет!</h2> <h3>Это чуть более сложный пример HTML-документа</h3> <P>Теперь мы знаем, что абзац можно выравнивать не только влево, </P> <P ALIGN=CENTER>но и по центру</P> <P ALIGN=RIGHT>или по правому краю. </P> </body> </html>
С этого момента Вы знаете достаточно, чтобы создавать простые HTML-документы самостоятельно от начала до конца. В следующем разделе мы поговорим, как можно улучшить наш простой HTML-документ. Начнем с малого — с абзаца.
Как писать код и сразу видеть результат
Когда только начинаешь программировать и делать сайты, важно понимать, что вообще происходит. Вот изменил ты параметр объекта — а правильно или нет? Заработало это или нет? Красиво вышло или ужасно?
Чтобы разработчик сразу видел результат труда, боги создали для него IDE — integrated development environment, по-русски — среду разработки. Это программа, в которой программист пишет код, ловит ошибки и наблюдает результат.
Чисто технически работать можно и без IDE: писать код в блокноте и просматривать его в специальных программах или браузере. Но это бывает медленно и требует дополнительных телодвижений. Лучше научиться пользоваться IDE и писать в сто раз быстрее.
Выбор среды разработки (IDE) — дело вкуса и привычки. Какие-то из них — универсальные, другие заточены под конкретные языки программирования. IDE часто похожи по своим возможностям и позволяют увеличивать функциональность за счёт внешних дополнений.
Visual Studio Code
Программу можно скачать с официального сайта. Несмотря на то, что VS Code делает Микрософт, это бесплатный продукт с открытым исходным кодом, доступный на всех платформах. Благодаря этому и своим возможностям VS Code стал одной из самых популярных сред для разработки в мире.
VS Code распознаёт почти все существующие языки программирования, самостоятельно или с помощью плагинов, и форматирует их соответствующим образом. Кроме этого, у него глубокая поддержка HTML, CSS, JavaScript и PHP — он проследит за парными тегами, закрытыми скобками и ошибками в командах.
Вот самые интересные возможности VS Code.
Умное автодополнение. Программа анализирует, какую команду вы хотите ввести, и предлагает закончить фразу за вас, с подсказками и объяснением. Удобно, если вы забыли порядок следования переменных или как точно звучит нужная команда:
Выполнение скриптов по шагам. Иногда нужно иметь возможность выполнить скрипт не сразу, а по шагам, например, чтобы понять, не зациклилась ли наша программа. Для этого используйте встроенный дебаггер — это программа, которая следит за кодом, ищет в нём ошибки и позволяет выполнять его поэтапно.
Множественное выделение и поиск. Чтобы поменять много одинаковых значений переменных или найти все одинаковые слова или команды, VS Code использует свой алгоритм обработки. Благодаря этому редактировать код становится проще, а замена функций или переменных происходит быстрее.
Мультикурсор помогает вводить одинаковые значения сразу на нескольких строках
Найденные одинаковые слова и команды можно тут же заменить на другие
Навигация по коду и описания функций. Когда пишешь большую программу, легко забыть то, что делал в начале — как работает функция или какого типа переменная используется в этом месте. Чтобы этого избежать, VS Code может показывать саму функцию, описание переменной или какие параметры передаются при вызове команды. Ещё это пригодится, если код достался вам по наследству от прошлого разработчика и нужно быстро понять, какие куски кода за что отвечают и как работают:
Сразу после установки VS Code не умеет показывать результаты работы кода, когда мы делаем веб-страницы. Это можно исправить с помощью расширения Live HTML Previewer. Для этого заходим в раздел «Extensions», щёлкая на последнем значке на панели слева или нажимая Ctrl+Shift+X, и начинаем писать «Live HTML Previewer» в строке поиска.
После установки и запуска расширения можно будет сразу видеть, как ваш HTML-код и CSS влияют на внешний вид и поведение страницы. Это особенно удобно, когда строишь сайт с нуля и хочешь сразу понимать, что происходит.
WebStorm
Среда разработки для JavaScript от компании jetBrains стоит денег, но есть пробный период в 30 дней. Вполне хватит, чтобы попробовать и понять, нужна эта программа или нет.
Автоподстановка. Некоторые IDE с автоподстановкой тормозят и не предлагают сразу все варианты переменных или команд — но не WebStorm. Здесь всё работает с первой буквы и понимает, когда надо предложить переменную, а когда команду или служебное слово:
Встроенная система задач. Полезно, когда в работе много проектов и нужно по каждому помнить, что ты хотел в нём сделать. Здесь это реализовано сразу и доступно для любого файла:
Проверка ошибок. WebStorm умеет сам проверять код на ошибки и пояснять каждую из них. Не всегда это работает идеально, но когда работает — экономит кучу времени:
Чтобы сразу видеть, что получается на странице, нам понадобится плагин LiveEdit. По умолчанию он выключен, но его можно включить или поставить отдельно в любое время. После активации нужно будет в настройках плагина поставить галочку «Update application in Chrome on changes in» — она как раз отвечает за обновление информации в браузере Chrome. Теперь можно писать код и сразу видеть результат:
Sublime Text 3
Бесплатный редактор, который назойливо предлагает занести денег разработчикам. Про Sublime Text у нас есть отдельная и более подробная статья — почитайте, там тоже интересно.
Sublime Text — потрясающе мощный текстовый редактор. Его сила — в скорости работы, он одинаково быстро обработает простую веб-страничку или программу на сто тысяч строк кода. Подсветка синтаксиса всех возможных языков программирования, автоподстановка, умное закрытие тегов — всё это доступно сразу после установки.

Пример разметки HTML-кода в Sublime Text
Вот что ещё умеет программа сразу после установки:
показывать разными цветами команды и переменные в популярных языках программирования;
автоматически завершать команды;
выделять сразу все одинаковые слова;
сворачивать код для удобства чтения;
использовать любые горячие клавиши, какие только понадобятся;
разделять рабочую область на несколько окон, в каждой из которых можно редактировать свой код.
Вторая суперспособность, которая превращает Sublime Text из простого текстового редактора в универсальное решение, — плагины. По принципу действия они такие же, как и в других программах из обзора, но они совершенно не влияют на скорость работы. Когда начинаешь плотно работать с Sublime Text, может показаться, что у него есть плагины для всего. Нужно редактировать одновременно один и тот же код, но в разных панелях — пожалуйста, написать быстро HTML-код — само собой, проверить код на ошибки и недочёты — без проблем.
Emmet сокращает время на написание кода, подставляя вместо стандартных команд целые куски готового кода
JavaScript & NodeJS Snippets упрощает написание кода на JavaScript и работает по тому же принципу, что и Emmet
SublimeCodeIntel помогает быстро разобраться в коде со множеством функций. Если щёлкнуть на название любой функции, плагин сразу покажет вам её описание.
Так как эта статья — для начинающих программистов, которым важно сразу видеть изменения в коде, то посмотрим, как это делает Sublime Text.
Сразу после установки он этого делать не умеет, но нам поможет плагин LiveReload. Он показывает все изменения в браузере, как только мы сохраняем рабочий файл с кодом. Это не так изящно, как в VS Code, но в случае с Sublime Text простительно. Дело в том, что привыкнув однажды писать в нём код, сложно пересесть на что-то другое, что работает с той же скоростью. Установка LiveReload состоит из двух компонентов — плагин для Sublime Text и расширение для браузера.
После установки давайте посмотрим, что у нас получилось. Создадим файл tested.html в Sublime Text, разметим его внутри стандартным шаблоном как HTML-документ, а рядом откроем окно браузера.
В реальном времени мы не увидим на странице те изменения, которые вносим в код, как это было в VS Code. Но если нажать Ctrl+S, чтобы сохранить все данные, то браузер моментально показывает то, что мы сделали.
Если вы серьёзно настроены программировать, присмотритесь к Visual Studio Code. Почти со всем он справляется сам или с плагинами, не нужно подключать дополнительно браузеры или сторонний софт.
Любите, чтобы после установки были доступны почти все нужные функции? Попробуйте WebStorm — платную, но мощную среду разработки.
Если вам важна скорость работы в любых ситуациях, то Sublime Text — лучший выбор. Он очень быстрый, и для него есть плагины почти на все случаи жизни.
Установка HTML-кода (скрипта) онлайн-консультанта Webim на сайт
На этом шаге вы внедрите HTML-код онлайн-консультанта Webim на сайт. В результате на страницах вашего сайта появится кнопка вызова оператора и/или приглашение к чату.
Внедрить функциональность онлайн консультанта Webim (чтобы на страницах Вашего сайта появилась кнопка вызова оператора и/или приглашение к чату) одинаково просто для любых сайтов, построенных на любых технологиях, написанных с использованием любых языков программирования и разметки, CMS и баз данных.
На странице Панели управления Кнопки и размещения выделите подготовленный сервисом Webim HTML-код и скопируйте его в буфер обмена:

Копирование HTML-кода кнопки:
Откройте средства управления кодом вашего сайта. Нужно обладать полномочиями редактирования его веб-страниц и/или шаблонов.
Если редактирование шаблонов осуществляется через административный интерфейс (например, в WordPress), войдите в административный интерфейс управления сайтом.
Если редактирование шаблонов осуществляется через модификацию файлов шаблонов в специальном формате (например, в Django), войдите в хранилище файлов проекта и найдите файлы шаблонов. Мы рекомендуем создать для кода Webim отдельный файл и включать его в шаблоны с помощью директивы include.
Если редактирование HTML-разметки осуществляется непосредственно в коде веб-страниц (например, в narod.ru), откройте файлы страниц в HTML-редакторе.
Вставьте код из буфера обмена в подходящее место шаблона. Мы рекомендуем разместить код Webim в общем шаблоне, используемом на всех страницах сайта. Тогда это нужно будет сделать только один раз. Разместите код кнопки внутри тега body в самом низу (в подвале, перед закрывающим тегом).

Размещение HTML-кода сервиса Webim:
Откройте свой сайт в браузере и проверьте, что на страницах появилась кнопка сервиса Webim.
Сервис Webim готов к работе.
Глава 4: DjangoBook по-русски | Django на русском
Глава 4. Шаблоны
Перевод © Попов Руслан <ruslan.popov • gmail>
В предыдущей главе вы могли заметить что-то особенное в том, как мы возвращали текст в наших представлениях. А именно, HTML был напрямую вбит в код на Python, примерно так:
def current_datetime(request): now = datetime.datetime.now() html = "<html><body>It is now %s.</body></html>" % now return HttpResponse(html)
Несмотря на то, что данный подход был удобен для объяснения принципов работы представления, он не может быть признан годным для использования в реальных проектах. И вот почему:
Любое изменение в дизайне страницы требует изменения в коде. Дизайн сайта изменяется гораздо чаще, чем сам код сайта. Удобнее будет иметь возможность вносить изменения в дизайн, не затрагивая код.
Разработка кода на языке Python и работа с HTML являются двумя различными дисциплинам и наиболее профессиональные среды web-разработки разделяют такую ответственность между отдельными людьми (или даже отдельными подразделениями). От дизайнеров и HTML/CSS кодеров не следует требовать редактирования Python кода для выполнения их работы.
Возможность одновременной работы программистов над Python кодом и дизайнеров над шаблонами является наиболее эффективным подходом, в отличие от необходимости одним ожидать окончания работ других, чтобы приступить к выполнению своих задач.
По этим причинам гораздо проще и более удобно разделять дизайн страницы от кода, обеспечивающего её работу. Мы можем сделать это с помощью шаблонной системы Django, которую мы обсудим в этой главе.
Основы шаблонной системы
Шаблон Django — это строка текста, которая предназначена для разделения представления документа от его данных. Шаблон определяет места подстановки и различные виды основной логики (шаблонные теги), которая управляет отображением документа. Обычно, шаблоны используются для создания HTML, но шаблоны Django также способны участвовать в генерации любого текстового формата.
Давайте начнём с простого примера. Данный шаблон описывает HTML страницу, которая благодарит посетителя за заказ, отправленный компании. Рассматривайте его как вид письма:
<html> <head><title>Ordering notice</title></head> <body> <h2>Ordering notice</h2> <p>Dear {{ person_name }},</p> <p>Thanks for placing an order from {{ company }}. It's scheduled to ship on {{ ship_date|date:"F j, Y" }}.</p> <p>Here are the items you've ordered:</p> <ul> {% for item in item_list %} <li>{{ item }}</li> {% endfor %} </ul> {% if ordered_warranty %} <p>Your warranty information will be included in the packaging. </p> {% else %} <p>You didn't order a warranty, so you're on your own when the products inevitably stop working.</p> {% endif %} <p>Sincerely,<br />{{ company }}</p> </body> </html>
Данный шаблон представляет собой обычный HTML с несколькими переменными и шаблонными тегами. Рассмотрим его подробнее:
Любой текст взятый в скобки (т.е., {{ person_name }}) является переменной. Это означает «вставить значение переменной с указанным именем.» (Как же мы определяем значения переменных? Скоро мы это рассмотрим.)
Любой текст взятый в фигурные скобки и проценты (т.е., {% if ordered_warranty %}) является шаблонным тегом. Определение тега достаточно простое: тег просто указывает шаблонной системе «сделать что-то.»
Вышеприведёный шаблон содержит тег for ({% for item in item_list %}) и тег if ({% if ordered_warranty %}).
Тег for работает почти так же как и оператор for языка Python, позволяя вам циклически обрабатывать каждый элемент последовательности. Тег if, как вы можете ожидать, работает аналогично логическому оператору if. В данном примере, тег проверяет является ли True значением ordered_warranty. Если это так, шаблонная система отобразит всё, что находится между {% if ordered_warranty %} и {% else %}. В противном случае, шаблонная система отобразит всё между {% else %} и {% endif %}. Следует отметить, что элемент {% else %} является необязательным.
Наконец, второй параграф данного шаблона содержит пример использования фильтра, который предоставляет наиболее удобный способ изменения формата переменной. В данном примере, {{ ship_date|date:»F j, Y» }}, мы передаём значение переменной ship_date фильтру date, указывая для него аргументы «F j, Y». Фильтр date форматирует дату в соответствии с указанным форматом. Фильтры подключаются к переменным с помощью символа |, аналогично Unix потокам.
Каждый шаблон Django имеет доступ к некоторому количеству встроенных тегов и фильтров, многие из которых будут рассмотрены в последующих разделах главы. Приложение F FIXME содержит полный список тегов и фильтров, будет неплохо, если вы ознакомитесь с этим списком. Также есть возможность создавать свои собственный фильтры и теги, мы рассмотрим это в главе 9 FIXME.
Входной и выходной HTML-код на страницах OneNote — Microsoft Graph

20.10.2020

Чтение занимает 12 мин

В этой статье

HTML-код, определяющий содержимое и структуру страницы при создании или обновлении страницы OneNote, называется входным HTML-кодом. The HTML that defines the page content and structure when you create or update a OneNote page is called input HTML.
HTML-код, возвращаемый при получении содержимого страницы, называется выходным HTML-кодом.The HTML that’s returned when you get page content is called output HTML. Выходной HTML-код не совпадает со входным.Output HTML won’t be the same as input HTML.
API OneNote в Microsoft Graph сохраняют семантическое содержимое и базовую структуру входного HTML-кода, но преобразовывают ее в набор поддерживаемых элементов HTML и свойств CSS.The OneNote APIs in Microsoft Graph preserve the semantic content and basic structure of the input HTML, but convert it to a set of supported HTML elements and CSS properties. API также добавляют настраиваемые атрибуты, поддерживающие функции OneNote.The APIs also add custom attributes that support OneNote features.
В этой статье описываются основные элементы и атрибуты входного и выходного HTML-кода.This article describes the principal elements and attributes of input and output HTML. Разбираться во входном HTML-коде полезно при создании и обновлении содержимого страницы, а в выходном — при анализе возвращаемого содержимого страницы.It can be helpful to understand input HTML when you’re creating or updating page content, and output HTML when you’re parsing returned page content.
Элемент bodybody element
HTML-содержимое в тексте страницы представляет ее содержимое и структуру, в том числе ресурсы изображений и файлов.The HTML content in the page body represents the page content and structure, including image and file resources. Входной и выходной HTML-код для элемента body может содержать перечисленные ниже атрибуты.The body element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
data-absolute-enableddata-absolute-enabled Указывает, поддерживают ли во входном тексте элементы с абсолютным положением. Indicates whether the input body supports absolute positioned elements.
stylestyle
Свойства CSS style для основного текста.The CSS style properties of the body. В выходном HTML-коде входные параметры могут быть встроены в соответствующие дочерние элементы.In the output HTML, input settings might be returned inline on appropriate child elements.
В настоящее время цвет фона не поддерживается для элемента body.Background color is not currently supported for the body element.
Выходные атрибутыOutput attributes
Выходной атрибутOutput attribute ОписаниеDescription
data-absolute-enableddata-absolute-enabled Указывает, поддерживаются ли в тексте элементы с абсолютным положением.Indicates whether the body supports absolute positioned elements. В выходном HTML-коде всегда задано значение true.Always true in output HTML.
stylestyle Свойства font-family и font-size основного текста.The font-family and font-size properties of the body.
Элементы divdiv elements
Элементы div содержат текст, изображения и другой контент.Div elements contain text, images, and other content. Входной и выходной HTML-код для элемента div может содержать перечисленные ниже атрибуты.A div element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.
Используется для обновления содержимого страницы.Used to update page content.
data-render-fallbackdata-render-fallback Резервное действие в случае ошибки извлечения: render (по умолчанию) или noneThe fallback action if the extraction fails: render (default) or none
data-render-methoddata-render-method Выполняемый метод извлечения, напримерThe extraction method to perform, for example:
extract. businesscard или extract.recipeextract.businesscard or extract.recipe
data-render-srcdata-render-src Источник контента для извлечения.The content source for the extraction.
stylestyle Свойства положения, размера, шрифта и цвета для элемента div:The position, size, font, and color properties for the div:
position (только значение absolute), left, top и width (высота элементов Div настраивается автоматически).position (absolute only), left, top, and width (height is auto-configured for divs)
Используется для создания элемента div с абсолютным положением, только если он является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Used to create an absolute positioned div, only if the div is a direct child of the body when the body sets data-absolute-enabled="true".
Пример: <div ... />Example: <div ... />
Свойства CSS style элемента. В выходных данных HTML эти значения возвращаются встроенными в соответствующие дочерние элементы.The CSS style properties of the element. In the output HTML, these values are returned inline on appropriate child elements.
API OneNote в Microsoft Graph заключают все содержимое основного текста по крайней мере в один элемент div.The OneNote APIs in Microsoft Graph wrap all body content in at least one div. API создает разделитель по умолчанию (с атрибутом data-id="_default") для содержимого основного текста, если:The API creates a default div (attributed with data-id="_default") to contain the body content if:
Входной атрибут data-absolute-enabled элемента body пропущен или для него задано значение false.The input body element’s data-absolute-enabled attribute is omitted or set to false. В этом случае все содержимое основного текста помещается в разделитель по умолчанию.In this case, all body content is put in the default div.
Для входного атрибута data-absolute-enabled элемента body задано значение true, но входной HTML-код содержит непосредственные дочерние элементы div, img или object без абсолютного положения.The input body element’s data-absolute-enabled attribute is true, but the input HTML contains direct children that aren’t absolute positioned div, img, or object elements. В этом случае непосредственные дочерние элементы div, img или object без абсолютного положения помещаются в элементы div по умолчанию.In this case, direct children that aren’t absolute positioned div, img, or object elements are put in the default div.
Выходные атрибутыOutput attributes
Вспомогательные разделителиNon-contributing divs
Если элемент div во входных данных HTML не входит в структуру страницы и не переносит сведения, используемые приложением OneNote, API перемещает содержимое разделителя в родительский или используемый по умолчанию разделитель.When a div element in the input HTML does not contribute to the page structure or carry information that OneNote uses, the API moves the div’s content into the parent or default div. Этот процесс показан в приведенных ниже примерах.This is illustrated in the following examples.
Входной HTML-кодInput HTML
Содержит вспомогательный вложенный разделитель.Contains a non-contributing, nested div.
<html> <head> <title>Page Title</title> </head> <body> <div> <p>Some text</p> <div> <p>More text inside a div that doesn't define page structure</p> </div> </div> </body> </html>
Выходной HTML-кодOutput HTML
Примечание. Содержимое разделителя было перемещено в родительский разделитель, а вложенные теги <div> удалены.Note: The div’s content was moved to the parent div and the nested <div> tags have been removed. Элемент div был бы сохранен, если бы в нем были определены какие-либо семантические сведения, такие как data-id (пример: <div data-id="keep-me">).The div would have been preserved if it defined any semantic information, such as a data-id (example: <div data-id="keep-me">).
<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Page Title</title> </head> <body data-absolute-enabled="true"> <div data-id="_default"> <p>Some text</p> <p>More text inside a nested div</p> </div> </body> </html>
Элементы imgimg elements
Для представления изображений на страницах OneNote используются элементы img. Images on OneNote pages are represented by img elements. Входной и выходной HTML-код для элемента img может содержать перечисленные ниже атрибуты.An img element can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
altalt Предоставленный замещающий текст для изображения.The supplied alt text for the image.
data-iddata-id Ссылка на элемент.A reference for the element.
Используется для обновления содержимого страницы.Used to update page content.
data-render-srcdata-render-src Должно было задано значение data-render-src или src.Either data-render-src or src is required.
Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote:The webpage to render as a bit-mapped image on the OneNote page:
— data-render-src="https://. .." для общедоступного URL-адреса.- data-render-src="https://..." for a public URL.
— data-render-src="name:BlockName" для части изображения в блоке Presentation составного запроса.- data-render-src="name:BlockName" for an image part in the «Presentation» block of a multipart request.
Этот метод удобно использовать, если веб-страница слишком сложна для достоверного отображения в OneNote или для использования страницы необходимы учетные данные.This method is useful when the webpage is more complex than the OneNote page can faithfully render, or when the page requires login credentials.
data-tagdata-tag Тег заметки для элемента.A note tag on the element.
stylestyle Свойства положения и размера изображения: position (только absolute), left, top, width и height.The position and size properties for the image: position (absolute only), left, top, width, and height.
Размер можно задать для любого изображения.Size can be set on any image.
Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Position properties are used to create an absolute positioned image, only if the image is a direct child of the body when the body sets data-absolute-enabled="true".
Пример: <img ... />Example: <img ... />
В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.In the output HTML, the image size is returned separately in width and height attributes.
srcsrc Должно было задано значение src или data-render-src.Either src or data-render-src is required.
Изображение, отображаемое на странице OneNote:The image to render on the OneNote page:
— src="https://...": URL-адрес общедоступного изображения в Интернете.- src="https://..." for a URL to a publicly available image on the Internet.
— src="name:BlockName": именованная часть составного запроса, представляющая изображение.- src="name:BlockName" for a named part in a multipart request that represents the image.
width, heightwidth, height Ширина и высота изображения в пикселях, но без обозначения px.The width or height of the image, in pixels but without the px. Пример: width="400"Example: width="400"
Примечание. API OneNote автоматически определяют тип входного изображения и возвращают его в качестве атрибута data-fullres-src-type в выходном HTML-коде.Note: The OneNote APIs automatically detect the input image type, and return it as the data-fullres-src-type in the output HTML. API также возвращает тип оптимизированного изображения в атрибуте data-src-type.The API also returns the image type of the optimized image in data-src-type.
Выходные атрибутыOutput attributes
Выходной атрибутOutput attribute ОписаниеDescription
altalt Предоставленный замещающий текст для изображения.The supplied alt text for the image.
data-iddata-id Ссылка на элемент.A reference for the element.
Используется для обновления содержимого страницы.Used to update page content.
data-indexdata-index Положение изображения. Для поддержки разделения изображений.The position of the image. For split image support.
data-fullres-srcdata-fullres-src Конечная точка версии изображения, которая была изначально внедрена на странице.The endpoint for the version of the image resource that was originally embedded in the page.
data-fullres-src-typedata-fullres-src-type Тип мультимедиа для ресурса data-fullres-src, например image/png или image/jpeg.The media type of the data-fullres-src resource, for example: image/png or image/jpeg.
data-optionsdata-options Тип источника: printout для PDF-файлов или splitimage для всех остальных. Применяется только к разделенным изображениям, созданным с помощью атрибута data-render-src.The source type: printout for PDF files or splitimage for all others. Applies only to split images created with the data-render-src attribute.
data-render-original-srcdata-render-original-src Исходный URL-адрес источника изображения, если исходное изображение находится в общедоступной части Интернета и создано с использованием атрибута data-render-src. The original source URL of the image, if the source image is from the public internet and was created with the data-render-src attribute.
data-src-typedata-src-type Тип мультимедиа для ресурса src, например image/png или image/jpeg.The media type of the src resource, for example: image/png or image/jpeg.
data-tagdata-tag Тег заметки для элемента.A note tag on the element.
idid Уникальный сгенерированный ИД элемента.A unique, generated ID for the element. Возвращается запросами GET к конечной точке content страницы при использовании параметра запроса includeIDs=true.Returned by GET requests to a page’s content endpoint when the includeIDs=true query option is used.
Используется для обновления содержимого страницы.Used to update page content.
srcsrc Конечная точка версии изображения, оптимизированного для веб-браузеров, а также мобильных телефонов и планшетов. The endpoint for the version of the image resource that has been optimized for web browsers and mobile and tablet form factors.
stylestyle Свойства позиции изображения.The position properties of the image.
width, heightwidth, height Ширина или высота изображения в пикселях.The width or height of the image, in pixels.
Примеры выходного HTML-кода для изображенийOutput HTML examples for images
Выходные элементы img содержат конечные точки для ресурсов файлов изображений и типа изображения, как показано ниже.Output img elements contain endpoints for image file resources and the image type, as shown below. Вы можете отправлять отдельные запросы GET к конечным точкам ресурсов изображений, чтобы получать их двоичное содержимое.You can make separate GET requests to image resource endpoints to retrieve their binary contents.
<img src="https://graph. microsoft.com/v1.0/me/onenote/resources/{image-id}/$value" data-src-type="image/png" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/{image-id}/$value" data-fullres-src-type="image/png" ... />
В приведенных ниже примерах показаны сведения, которые может содержать элемент img в выходном HTML-коде.The following examples show the information an img element might contain in the output HTML.
Изображение с ресурсами высокого разрешения для ИнтернетаImage with web-ready and high resolution resources
<img src="{web-ready-image-resource-url}/$value" data-src-type="image/{type}" data-fullres-src="{high-resolution-image-resource-url}/$value" data-fullres-src-type="image/{type}" [data-render-original-src="{original-source-url-or-named-part}"] [data-id="{image-id}"] [alt="supplied alt text"] [width="345"] [height="180"] [style="..."] />
Изображение, созданное с использованием атрибута
data-render-srcImage created by using the data-render-src attribute
<img src="{web-ready-image-resource-url}/$value" data-src-type="image/{type}" data-fullres-src="{high-resolution-image-resource-url}/$value" data-fullres-src-type="image/{type}" data-render-original-src="{original-source-url-or-named-part}" [data-id="{image-id}"] [data-index="{index-of-split-image}"] [data-options="{printout-or-splitimage}"] [alt="supplied alt text"] [width="1024"] [height="1900"] [style=". .."] />
Разделенные изображенияSplit images
Изображения, созданные с использованием атрибута data-render-src (из URL-адреса страницы или именованной части), могут быть разделены на несколько компонентов для повышения производительности и удобства отрисовки.Images that are created using the data-render-src attribute (from a webpage URL or a named part) might be split into multiple component images for performance and rendering reasons. Всем компонентам изображения назначается одно и то же значение data-id.Component images are all assigned the same data-id value. У каждого компонента изображения есть атрибут data-index с отсчетом от нуля, определяющий исходную вертикальную компоновку.Each component image has a zero-based data-index attribute that defines the original vertical layout.
Разделенное изображение с тремя компонентамиSplit image with three component images
<div data-id="multi-component-image"> <img src="{image-resource0-url}/$value" data-src-type="image/{type}" data-fullres-src="{image-resource0-url}/$value" data-fullres-src-type="image/{type}" data-index="0" data-render-original-src="{original-source-url-or-named-part}" data-id="{same-image-id}" . .. /> <img src="{image-resource1-url}/$value" data-src-type="image/{type}" data-fullres-src="{image-resource1-url}/$value" data-fullres-src-type="image/{type}" data-index="1" data-render-original-src="{original-source-url-or-named-part}" data-id="{same-image-id}" ... /> <img src="{image-resource2-url}/$value" data-src-type="image/{type}" data-fullres-src="{image-resource2-url}/$value" data-fullres-src-type="image/{type}" data-index="2" data-render-original-src=""{original-source-url-or-named-part}" data-id="{same-image-id}" ... /> </div>
Так как пользователи могут перемещать изображения на странице, индексы могут возвращаться в измененном порядке.Because users can move the images on the page, the returned indexes might be out of order. Сортировка должна выполняться сверху вниз, а затем слева направо (если возникнут конфликты при вертикальной сортировке). Ordering should be in top to bottom y-order, and then left to right x-order if there are y-order conflicts.
Элементы iframeiframe elements
Страницы OneNote могут содержать внедренные видео, представленные элементами iframe.OneNote pages can contain embedded videos represented by iframe elements.
Примечание. Вы также можете вложить видеофайл с помощью элемента object.Note: You can also attach a video file using an object element.
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
data-original-srcdata-original-src Обязательный.Required. URL-адрес источника видео.The URL of the video source. См. список поддерживаемых источников видео.See the list of supported video sources.
Пример: data-original-src="https://www.youtube. com/watch?v=3Ztr44aKmQ8"Example: data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"
width, heightwidth, height Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: width=300Example: width=300
Выходные атрибутыOutput attributes
Выходной атрибутOutput attribute ОписаниеDescription
data-original-srcdata-original-src URL-адрес источника видео.The URL of the video source.
srcsrc Ссылка на видео, внедренное в страницу OneNote.A link to the video that is embedded in the OneNote page.
width, heightwidth, height Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels.
Пример: width=300Example: width=300
Пример выходного HTML-кода для видеоOutput HTML example for videos
Выходные элементы iframe содержат конечные точки, ссылающиеся на исходную страницу и видео, как показано ниже. Output iframe elements contain endpoints that link to the source page and video, as shown.
<iframe data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8" src="https://www.youtube.com/embed/3Ztr44aKmQ8?feature=oembed&autoplay=true" />
Элементы objectobject elements
Страницы OneNote могут содержать вложения, представленные элементами object.OneNote pages can contain file attachments represented by object elements. Входной и выходной HTML-код для элемента object может содержать перечисленные ниже атрибуты.An object element can contain the following attributes in the input and output HTML.
Примечание. API OneNote также может отображать содержимое файлов в виде изображений на странице, если файл отправлен как изображение и использует атрибут data-render-src.Note: The OneNote APIs can also render file content as images in a page when the file is sent as an image and uses the data-render-src attribute. Пример: <img data-render-src="name:part-name" ... />Example: <img data-render-src="name:part-name" ... />
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
datadata Обязательный.Required. Имя части, которая представляет файл в составном запросе.The name of the part that represents the file in the multipart request.
data-attachmentdata-attachment Обязательный параметр. Имя файла.Required. The file name.
data-iddata-id Ссылка на элемент.A reference for the element.
Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства положения и размера объекта: position (только absolute), left, top и width.The position and size properties for the object: position (absolute only), left, top, and width.
Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут data-absolute-enabled="true".Used to create an absolute positioned object, only if the object is a direct child of the body when the body sets data-absolute-enabled="true".
Пример: <object ... />Example: <object ... />
typetype Обязательный.Required.
Стандартный тип файла мультимедиа.The standard media file type. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла.Known file types display the icon associated with the file type on the OneNote page. Для файлов неизвестных типов отображается универсальный значок файла.Unknown file types display a generic file icon.
Выходные атрибутыOutput attributes
Пример выходных данных HTML для объектовOutput HTML example for objects
Выходные элементы object содержат конечные точки, ссылающиеся на файловые ресурсы со страницы, как показано ниже. Output object elements contain endpoints that link to the file resources in the page, as shown. Вы можете отправлять отдельные запросы GET к конечным точкам файловых ресурсов, чтобы получать их двоичное содержимое.You can make separate GET requests to file resource endpoints to retrieve their binary contents.
<object data="https://graph.microsoft.com/v1.0/me/onenote/resources/{file-id}/$value" data-attachment="fileName.pdf" type="application/pdf" [style="..."] />
Абзацы и заголовкиParagraphs and headings
Входной и выходной HTML-код для абзацев, заголовков и других текстовых контейнеров может содержать перечисленные ниже атрибуты.Paragraphs, headings, and other text containers can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Выходные атрибутыOutput attributes
В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей в текстовых контейнерах, и возвращаемый выходной HTML-код. The following examples show input HTML that uses different ways to define styles on text containers and the output HTML that’s returned.
Входной HTML-код со стилями, определенными с помощью встроенных стилей знаков, в начальном теге внутри элемента span.Input HTML with styles defined using inline character styles, in the start tag, and within a span element.
<h2>Heading <i>One</i> text</h2> <p>Some text</p> <p>Some <span >more</span> text</p>
Выходной HTML-код со стилем знака
<i> и параметрами шрифта в начальном теге <p>, возвращаемыми в виде встроенных стилей CSS в элементах span.Output HTML with the <i> character style and the font settings in the <p> start tag returned as inline CSS styles on span elements.
<h2>Heading <span>One</span> text</h2> <p><span>Some text</span></p> <p>Some <span>more</span> text</p>
СпискиLists
Для представления списков используются элементы ol или ul, которые содержат элементы списка, представленные элементами li. Lists are represented as ol or ul elements that contain list items represented as li elements.
Входной и выходной HTML-код списков и их элементов может содержать перечисленные ниже атрибуты.Lists and list items can contain the following attributes in the input and output HTML.
Входные атрибутыInput attributes
Выходные атрибутыOutput attributes
Стили списковList styles
API OneNote в Microsoft Graph поддерживают следующие стили списков:The OneNote APIs in Microsoft Graph support the following list styles:
Упорядоченный списокOrdered list Неупорядоченный списокUnordered list
nonenone nonenone
decimal (по умолчанию)decimal (default)
disc (по умолчанию)disc (default)
lower-alphalower-alpha
circlecircle
lower-romanlower-roman
squaresquare | | upper-alphaupper-alpha | | | upper-romanupper-roman | |
Вы можете применять глобальные стили для списка в элементе ol или ul входных данных HTML, но стили возвращаются в элементах li. You can apply global styles for a list on the ol or ul element in the input HTML, but styles are returned on the li elements.
Однородный стиль спискаHomogenous list style
В этом примере показан входной HTML-код, который задает тип стиля списка в элементе ol и стили CSS для отдельных элементов списка.This example shows input HTML that sets the list style type on the ol element and CSS styles on individual list items.
<ol> <li>Jacksonville</li> <li>Orlando</li> <li>Naples</li> </ol>
Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.
<ol> <li><span>Jacksonville</span></li> <li><span>Orlando</span></li> <li><span>Naples</span></li> </ol>
Переменные стили списковVariable list styles
В этом примере показан входной HTML-код, который задает разные типы стилей списков в элементах li. This example shows input HTML that sets different list style types on the li elements.
<ul> <li>square style</li> <li>circle style</li> <li>disc style (default)</li> </ul>
Ниже приводятся выходные данные HTML. Обратите внимание, что стили возвращаются встроенными в отдельные элементы li или span.This is the output HTML. Notice that styles are returned inline on the individual li or span elements.
<ul> <li><span>square style</span></li> <li><span>circle style</span></li> <li><span>disc style (default)</span></li> </ul>
таблицы;Tables
Таблицы представляются как элементы table, которые могут содержать элементы tr и td. Поддерживаются вложенные таблицы. Tables are represented as table elements that can contain tr and td elements. Nested tables are supported.
Входной и выходной HTML-код для таблиц может содержать перечисленные ниже атрибуты.Tables can contain the following attributes in the input and output HTML. API OneNote не поддерживают атрибуты rowspan и colspan.The OneNote APIs do not support rowspan or colspan attributes.
Входные атрибутыInput attributes
Входной атрибутInput attribute ОписаниеDescription
data-iddata-id Ссылка на элемент.A reference for the element.
Используется для обновления содержимого страницы.Used to update page content.
stylestyle Свойства CSS style для элемента, а также:The CSS style properties of the element, and also:
— width.- width. Поддерживается в элементах table и td как количество пикселей или процент от ширины страницы.Supported by table and td as pixels or percentage of page width.
Пример: width="100px" или width="60%"Example: width="100px" or width="60%"
границаborder Складывает границы с таблицей указанной шириныAdds border to table with specified width
ширинаwidth Ширина таблицыWidth of the table
bgcolorbgcolor Цвет фона таблицыThe background color of the table
Примечание: Использование свойства граница в стиле атрибута таблицы не поддерживается в ввода html.Note: The use of the border property in the style attribute of a table is not supported in input html.
Выходные атрибутыOutput attributes
В приведенных ниже примерах показан входной HTML-код, где используются разные способы определения стилей для таблиц, и возвращаемый выходной HTML-код. The following examples show input HTML that uses different ways to define styles on tables and the output HTML that’s returned.
Входной HTML-код с необязательными параметрами на разных уровнях.Input HTML with optional settings at different levels
<table border="1";; bgcolor = "green"> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Left</td> <td>Middle</td> <td>Right</td> </tr> </table>
Выходной HTML-код со стилями CSS, которые возвращаются встроенными в элементы td.Output HTML with CSS styles returned inline on the td elements
<table> <tr> <td>Cell 1</td> <td>Cell 2</td> <td>Cell 3</td> </tr> <tr> <td>Left</td> <td>Middle</td> <td>Right</td> </tr> </table>
СтилиStyles
API OneNote в Microsoft Graph поддерживают перечисленные ниже встроенные свойства CSS style для элементов основного текста страницы, например body, div, p, li и span. OneNote APIs in Microsoft Graph support the following inline CSS style properties for elements in the page body, such as body, div, p, li, and span.
СвойствоProperty ПримерExample
background-colorbackground-color style="background-color:#66cc66" (по умолчанию задан белый цвет)style="background-color:#66cc66" (defaults to white)
Поддерживаются как шестнадцатеричный формат, так и именованные цвета.Both hexadecimal format and named colors are supported.
colorcolor style="color:#ffffff" (по умолчанию задан черный цвет)style="color:#ffffff" (defaults to black)
font-familyfont-family style="font-family:Courier" (по умолчанию задан шрифт Calibri)style="font-family:Courier" (defaults to Calibri)
font-sizefont-size style="font-size:10pt" (по умолчанию задан размер 11 точек)style="font-size:10pt" (defaults to 11pt)
API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt. The APIs accept font size in pt or px, but converts px to pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.Decimal values are rounded to the nearest n.0pt or n.5pt.
font-stylefont-style style="font-style:italic" (обычный или только курсив)style="font-style:italic" (normal or italic only)
font-weightfont-weight style="font-weight:bold" (обычный или только полужирный)style="font-weight:bold" (normal or bold only)
strike-throughstrike-through style="text-decoration:line-through"
text-aligntext-align style="text-align:center" (только для блочных элементов)style="text-align:center" (for block elements only)
text-decorationtext-decoration style="text-decoration:underline" (без оформления или только подчеркивание)style="text-decoration:underline" (none or underline only)
Кроме того, поддерживаются следующие встроенные стили знаков:The following inline character styles are also supported:
Пример входного и выходного HTML-кодаInput and output HTML example
На приведенном ниже рисунке показана простая страница, созданная с помощью Microsoft Graph. The following image shows a simple page that was created with Microsoft Graph.
Ниже показан входной HTML-код, отправляемый в тексте сообщения для создания страницы.This is the input HTML sent in the message body to create the page.
<html lang="en-US"> <head> <title>Sample Study Notes</title> <meta name="created" content="2015-01-01T01:01"/> </head> <body> <h2>Aurora Borealis</h2> <p>Dancing lights in the sky. Also called <i>Northern Lights</i>. Caused by solar radiation.</p> <br /> <p><b>Intersting facts</b></p> <table> <tr> <td>Neil Armstrong</td> <td>Commander</td> </tr> <tr> <td>Buzz Aldrin</td> <td>LM Pilot</td> </tr> <tr> <td>Michael Collins</td> <td>Command Module Pilot</td> </tr> </table> <img alt="Apollo 11 commemorative stamp. " src="https://upload.wikimedia.org/wikipedia/commons/a/a4/First_Man_on_Moon_1969_Issue-10c.jpg" /> <p>References:</p> <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p> <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p> </body> </html>
Ниже показан выходной HTML-код, который Microsoft Graph возвращает при получении содержимого страницы.This is the output HTML that Microsoft Graph returns when you get page content.
Примечание. При создании страницы или получении метаданных страницы API возвращает URL-адрес конечной точки content для страницы в свойстве contentUrl.Note: When you create a page or get page metadata, the API returns the content endpoint URL of the page in the contentUrl property.
<html htmlns="https://www.w3.org/1999/xhtml" lang="en-US"> <head> <title>Sample Study Notes</title> </head> <body data-absolute-enabled="true"> <div data-id="_default"> <h2>American History 101: Moon Landing</h2> <p>First moon landing - July 20, 1969 with Apollo 11 (Eagle)</p> <br /> <p><span>Apollo 11 Astronauts</span></p> <table> <tr> <td>Neil Armstrong</td> <td>Commander</td> </tr> <tr> <td>Buzz Aldrin</td> <td>LM Pilot</td> </tr> <tr> <td>Michael Collins</td> <td>Command Module Pilot</td> </tr> </table> <br /> <img alt="Apollo 11 commemorative stamp. " src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-src-type="image/jpeg" data-fullres-src="https://graph.microsoft.com/v1.0/me/onenote/resources/0-f717b5fa5eaa454da7ecdf72a8c137fe!1-73DBAF9B7E5C4B4C!10456/$value" data-fullres-src-type="image/jpeg" /> <p>References:</p> <p><a href="https://en.wikipedia.org/wiki/Apollo_11">https://en.wikipedia.org/wiki/Apollo_11</a></p> <p><a href="https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html">https://www.nasa.gov/mission_pages/apollo/missions/apollo11.html</a></p> </div> </body> </html>
См. такжеSee also
HTML Базовый
В этой главе мы покажем несколько основных примеров HTML.
Не беспокойтесь, если мы будем использовать теги, о которых вы еще не знали.
Документы HTML
Все документы HTML должны начинаться с объявления типа документа: .
Сам документ HTML начинается с и заканчивается .
Видимая часть HTML-документа находится между и .
Пример

Мой первый заголовок

Мой первый абзац.

Попробуй сам »
Декларация
Объявление представляет тип документа и помогает браузерам правильно отображать веб-страницы.
Он должен появляться только один раз, вверху страницы (перед любыми HTML-тегами).
В объявлении регистр не учитывается.
Объявление для HTML5:
HTML-заголовки
Заголовки
HTML определяются тегами
–.

определяет наиболее важный заголовок. определяет наименее важные заголовок:
Пример
Это заголовок 1

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

Это заголовок 3
Попробуй сам »
HTML абзацы
абзацев HTML определяются тегом
:
HTML-ссылки
HTML-ссылки определяются тегом :
Назначение ссылки указано в атрибуте href .
Атрибуты используются для предоставления дополнительной информации об элементах HTML.
Вы узнаете больше об атрибутах в следующей главе.
Изображения HTML
изображений HTML определяются тегом .
Исходный файл ( src ), альтернативный текст ( alt ), ширина и высота предоставляются как атрибуты:
Пример
jpg «alt =» W3Schools.com «>
Попробуй сам »
Как просмотреть исходный код HTML?
Вы когда-нибудь видели веб-страницу и задавались вопросом: «Эй! Как они это сделали?»
Просмотреть исходный код HTML:
Щелкните правой кнопкой мыши страницу HTML и выберите «Просмотр исходного кода страницы» (в Chrome) или «Просмотр исходного кода» (в Edge) или аналогичное в других браузерах. Это откроет окно содержащий исходный HTML-код страницы.
Проверить элемент HTML:
Щелкните правой кнопкой мыши элемент (или пустую область) и выберите «Проверить» или «Осмотрите элемент», чтобы увидеть, из каких элементов состоят (вы увидите оба HTML и CSS).Вы также можете редактировать HTML или CSS на лету в Откроется панель «Элементы» или «Стили».

Введение в HTML
HTML — это стандартный язык разметки для создания веб-страниц.
Что такое HTML?
HTML означает язык гипертекстовой разметки
HTML — стандартный язык разметки для создания веб-страниц
HTML описывает структуру веб-страницы
HTML состоит из серии элементов
Элементы HTML сообщают браузеру, как отображать контент
HTML-элементы помечают фрагменты контента, такие как «это заголовок», «это это абзац «,» это ссылка «и т. д.
Простой документ HTML
Пример

Заголовок страницы
Мой первый заголовок

Мой первый абзац.

Попробуй сам »
Объяснение примера
Объявление определяет что этот документ является документом HTML5
Элемент является корневым элементом HTML стр.
Элемент содержит метаинформацию о HTML-страница
Элемент </code> определяет заголовок для HTML-страница (которая отображается в строке заголовка браузера или на вкладке страницы)</li><li> Элемент <code><body> </code> определяет тело документа и является контейнером для всего видимого содержимого, например заголовки, абзацы, изображения, гиперссылки, таблицы, списки и т. д.</li><li> Элемент <code><h2></h2> </code> определяет большой заголовок</li><li> Элемент <code><p> </code> определяет абзац</li></ul><hr/><h3><span class="ez-toc-section" id="_HTML-11"> Что такое элемент HTML? </span></h3><p> Элемент HTML определяется начальным тегом, некоторым содержимым и конечным тегом:</p><p> <tagname> Здесь идет контент .<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/st2.depositphotos.com/1004590/5239/i/950/depositphotos_52394743-stock-photo-html-codes.jpg' style='float: right;' /><noscript><img src='/800/600/https/st2.depositphotos.com/1004590/5239/i/950/depositphotos_52394743-stock-photo-html-codes.jpg' style='float: right;' /></noscript> .. </tagname></p><p> Элемент HTML <strong> </strong> — это все, от начального тега до конечного тега:</p><p><h2><span class="ez-toc-section" id="i-29"> Мой Первый заголовок </span></h2></p><p><p> Мой первый абзац.</p></p><table><tr><th> Начальный тег</th><th> Содержание элемента</th><th> Концевая метка</th></tr><tr><td><h2></h2></td><td> Мой первый заголовок</td><td></h2></td></tr><tr><td><p></td><td> Мой первый абзац.</td><td></p></td></tr><tr><td> <br></td><td> <em> нет </em></td><td> <em> нет </em></td></tr></table><p> <strong> Примечание. </strong> Некоторые элементы HTML не имеют содержимого (например, <br> элемент).Эти элементы называются пустыми элементами. Пустые элементы не имеют закрывающего тега!</p><hr/><hr/><h3><span class="ez-toc-section" id="i-30"> Веб-браузеры </span></h3><p> Назначение веб-браузера (Chrome, Edge, Firefox, Safari) — читать HTML-документы и отображать их. правильно.</p><p> Браузер не отображает теги HTML, но использует их для определения способа отображения документа:</p><p></p><hr/><h3><span class="ez-toc-section" id="_HTML-12"> Структура HTML-страницы </span></h3><p> Ниже представлена визуализация структуры HTML-страницы:</p><p><title> Заголовок страницы Это заголовок Это абзац. Это еще один абзац.
Примечание: Содержимое внутри раздела (белая область выше) будет отображаться в браузере. Содержимое внутри элемента будет отображается в строке заголовка браузера или на вкладке страницы.</p><hr/><h3><span class="ez-toc-section" id="_HTML-13"> История HTML </span></h3><p> С первых дней существования всемирной паутины было много версий HTML:</p><p> Это руководство соответствует последнему стандарту HTML5.</p> <br/> <br/><h2><span class="ez-toc-section" id="_HTML-14"> Основы HTML — Изучите веб-разработку </span></h2><p> HTML (<strong> H </strong> yper <strong> t </strong> ext <strong> M </strong> arkup <strong> L </strong> anguage) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в рамках набора абзацев, списка отмеченных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам базовое понимание HTML и его функций.</p><p> HTML — это язык разметки <em> </em>, который определяет структуру вашего контента.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/6FWL4.png' style='float: right;' /><noscript><img src='/800/600/https/i.stack.imgur.com/6FWL4.png' style='float: right;' /></noscript> HTML состоит из серии из <strong> элементов </strong>, которые вы используете, чтобы заключить или обернуть различные части контента, чтобы он выглядел определенным образом или действовал определенным образом. Включающие теги могут создавать гиперссылку слова или изображения на другое место, могут выделять слова курсивом, могут увеличивать или уменьшать шрифт и т. Д. Например, возьмите следующую строку содержания:</p><pre> Моя кошка очень сварливая </pre><p> Если мы хотим, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключив его в теги абзацев:</p><pre> <code> <p> Мой кот очень сварливый </p> </code> </pre><h4><span class="ez-toc-section" id="_HTML-15"> Анатомия HTML-элемента </span></h4><p> Давайте подробнее рассмотрим этот элемент абзаца.</p><p></p><p> Основные части нашего элемента следующие:</p><ol><li> <strong> Открывающий тег: </strong> Он состоит из имени элемента (в данном случае p), заключенного в открывающие и закрывающие <strong> угловые скобки </strong>. Это указывает, где элемент начинается или начинает действовать — в данном случае, где начинается абзац.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.pvsm.ru/images/2014/11/08/Brackets-dlya-somnevayushihsya-i-novichkov.png' style='float: right;' /><noscript><img src='/800/600/https/www.pvsm.ru/images/2014/11/08/Brackets-dlya-somnevayushihsya-i-novichkov.png' style='float: right;' /></noscript></li><li> <strong> Закрывающий тег: </strong> Это то же самое, что открывающий тег, за исключением того, что он включает косую черту <em> перед именем элемента.Это указывает, где заканчивается элемент — в данном случае, где заканчивается абзац. Отсутствие закрывающего тега — одна из стандартных ошибок новичков, которая может привести к странным результатам.</li><li> <strong> Содержимое: </strong> Это содержимое элемента, который в данном случае является просто текстом.</li><li> <strong> Элемент: </strong> Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.</li></ol><p> Элементы также могут иметь следующие атрибуты:</p><p></p> Атрибуты<p> содержат дополнительную информацию об элементе, который вы не хотите отображать в фактическом содержании.Здесь <code> класс </code> — это атрибут <em>, имя </em>, а <code> - примечание редактора, </code> — это атрибут <em>, значение </em>. Атрибут <code> class </code> позволяет вам дать элементу неуникальный идентификатор, который можно использовать для нацеливания на него (и любые другие элементы с таким же значением <code> class </code>) с информацией о стиле и другими вещами.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/KkNhb.png' style='float: right;' /><noscript><img src='/800/600/https/i.stack.imgur.com/KkNhb.png' style='float: right;' /></noscript></p><p> Атрибут всегда должен иметь следующее:</p><ol><li> Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).</li><li> Имя атрибута, за которым следует знак равенства.</li><li> Значение атрибута, заключенное в открывающие и закрывающие кавычки.</li></ol><p> <strong> Примечание </strong>: простые значения атрибутов, не содержащие пробелов ASCII (или любой из символов <code> "</code> <code> '</code> <code>` </code> <code> = </code> <code> <</code> <code>> </code>), могут оставаться без кавычек, но рекомендуется заключите все значения атрибутов в кавычки, так как это сделает код более последовательным и понятным.</p><h4><span class="ez-toc-section" id="i-32"> Вложение элементов </span></h4><p> Вы также можете размещать элементы внутри других элементов - это называется вложением <strong> </strong>. Если бы мы хотели заявить, что наша кошка <strong> очень сварливая </strong>, мы могли бы заключить слово «очень» в элемент <code> <strong> </code>, что означает, что слово должно быть сильно подчеркнуто:</p><pre> <code> <p> Моя кошка <strong> очень </strong> сварливая.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf2.ppt-online.org/files2/slide/b/Bt5seA03TLbzcmu1DVHvqi6Z9owdn4FRgXGOPUWSY/slide-9.jpg' style='float: right;' /><noscript><img src='/800/600/https/cf2.ppt-online.org/files2/slide/b/Bt5seA03TLbzcmu1DVHvqi6Z9owdn4FRgXGOPUWSY/slide-9.jpg' style='float: right;' /></noscript> </p> </code> </pre><p> Однако вам необходимо убедиться, что ваши элементы правильно вложены.В приведенном выше примере мы сначала открыли элемент <code><p> </code>, а затем элемент <code> <strong> </code>; следовательно, мы должны сначала закрыть элемент <code> <strong> </code>, затем элемент <code><p> </code>. Следующее неверно:</p><pre> <code> <p> Моя кошка <strong> очень сварливая </p> </strong> </code> </pre><p> Элементы должны открываться и закрываться правильно, чтобы они четко находились внутри или снаружи друг друга. Если они накладываются друг на друга, как показано выше, ваш веб-браузер попытается максимально точно угадать, что вы пытались сказать, что может привести к неожиданным результатам.Так что не делай этого!</p><h4><span class="ez-toc-section" id="i-33"> Пустые элементы </span></h4><p> Некоторые элементы не имеют содержимого и называются <strong> пустыми элементами </strong>. Возьмите элемент <code> <img> </code>, который у нас уже есть на нашей HTML-странице:</p><pre> <code> <img class="lazy lazy-hidden" src = "images / firefox-icon.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/pbs.twimg.com/media/CvLOt6jXEAAZorl.jpg' style='float: right;' /><noscript><img src = "images / firefox-icon.<img src='/800/600/https/pbs.twimg.com/media/CvLOt6jXEAAZorl.jpg' style='float: right;' /></noscript> png" alt = "Мое тестовое изображение"> </code> </pre><p> Он содержит два атрибута, но нет закрывающего тега <code> </img> </code> и внутреннего содержимого. Это потому, что элемент изображения не оборачивает контент, чтобы повлиять на него. Его цель - вставить изображение на HTML-страницу в том месте, где оно появляется.</p><h4><span class="ez-toc-section" id="_HTML-16"> Анатомия HTML-документа </span></h4><p> Это завершает основы отдельных элементов HTML, но они не подходят сами по себе. Теперь посмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте еще раз вернемся к коду, который мы поместили в наш пример <code> index.html </code> (который мы впервые встретили в статье Работа с файлами):</p><pre> <code> <! DOCTYPE html> <html> <head> <meta charset = "utf-8"> <title> Моя тестовая страница
Здесь имеем:
- doctype. Это обязательная преамбула. В глубине веков, когда HTML был молод (около 1991/92), типы документа должны были действовать как ссылки на набор правил, которым должна была следовать страница HTML, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни они мало что делают и в основном просто необходимы, чтобы убедиться, что ваш документ ведет себя правильно.Это все, что вам нужно знать на данный момент.
- элемент . Этот элемент охватывает весь контент на всей странице и иногда называется корневым элементом.
- элемент . Этот элемент действует как контейнер для всего того, что вы хотите включить на HTML-страницу, что не контент, который вы показываете зрителям своей страницы. Сюда входят такие вещи, как ключевые слова и описание страницы, которые вы хотите отображать в результатах поиска, CSS для стилизации нашего контента, объявления набора символов и многое другое.
- этот элемент устанавливает набор символов, который должен использовать ваш документ, в UTF-8, который включает большинство символов из подавляющего большинства письменных языков. По сути, теперь он может обрабатывать любой текстовый контент, который вы можете добавить к нему. Нет причин не устанавливать это, и это может помочь избежать некоторых проблем в дальнейшем.
- элемент </code>. Это устанавливает заголовок вашей страницы, который отображается во вкладке браузера, в которую загружена страница.Он также используется для описания страницы, когда вы добавляете ее в закладки / добавляете в избранное.</li><li> <code><body></body> </code> - элемент <code><body> </code>. Он содержит <em> всего </em> контента, который вы хотите показывать веб-пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, воспроизводимые аудиодорожки или что-то еще.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/studfile.net/html/2706/332/html_Cut6H5jOcl.RXOM/htmlconvd-Acaktz4x1.jpg' style='float: right;' /><noscript><img src='/800/600/https/studfile.net/html/2706/332/html_Cut6H5jOcl.RXOM/htmlconvd-Acaktz4x1.jpg' style='float: right;' /></noscript></li></ul><p> Давайте снова обратим внимание на элемент <code> <img> </code>:</p><pre> <code> <noscript><img class="lazy lazy-hidden" src = "images / firefox-icon.png "alt =" Мое тестовое изображение "></noscript><img class="lazyload lazy lazy-hidden" src = "images / firefox-icon.png "alt =" Мое тестовое изображение "><noscript><img src = "images / firefox-icon.png "alt =" Мое тестовое изображение "></noscript> </code> </pre><p> Как мы уже говорили, он вставляет изображение на нашу страницу в том месте, где оно появляется. Это делается с помощью атрибута <code> src </code> (source), который содержит путь к нашему файлу изображения.</p><p> Мы также добавили атрибут <code> alt </code> (альтернативный). В этом атрибуте вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам:</p><ol><li> Слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы прочитать им замещающий текст.</li><li> Произошла ошибка, из-за чего изображение не отображается. Например, попробуйте намеренно изменить путь в атрибуте <code> src </code>, чтобы он стал неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения:</li></ol><p></p><p> Ключевые слова для замещающего текста - «описательный текст».<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/i.stack.imgur.com/tHnK8.png' style='float: right;' /><noscript><img src='/800/600/https/i.stack.imgur.com/tHnK8.png' style='float: right;' /></noscript> Написанный вами альтернативный текст должен предоставить читателю достаточно информации, чтобы иметь хорошее представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совершенно не подходит.Намного лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю».</p><p> Попробуйте придумать лучший замещающий текст для вашего изображения.</p><p> В этом разделе рассматриваются некоторые важные элементы HTML, которые вы будете использовать для разметки текста.</p><h4><span class="ez-toc-section" id="i-34"> Заголовки </span></h4><p> Элементы заголовка позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как у книги есть основной заголовок, заголовки глав и подзаголовки, документ HTML тоже может.HTML содержит 6 уровней заголовков, <code><h2></h2></code>–<code><h6></h6> </code>, хотя вы обычно используете максимум от 3 до 4:</p><pre> <code> <h2><span class="ez-toc-section" id="i-35"> Мое основное название </span></h2> <h3><span class="ez-toc-section" id="i-36"> Заголовок верхнего уровня </span></h3> <h4><span class="ez-toc-section" id="i-37"> Мой подзаголовок </span></h4> <h5><span class="ez-toc-section" id="i-38"> Мой подзаголовок </span></h5> </code> </pre><p> Теперь попробуйте добавить подходящий заголовок на свою HTML-страницу чуть выше элемента <code> <img> </code>.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ds05.infourok.ru/uploads/ex/06c6/0000415d-e19b03ae/img21.jpg' style='float: right;' /><noscript><img src='/800/600/https/ds05.infourok.ru/uploads/ex/06c6/0000415d-e19b03ae/img21.jpg' style='float: right;' /></noscript></p><p> <strong> Примечание </strong>: Вы увидите, что ваш заголовок уровня 1 имеет неявный стиль.Не используйте элементы заголовка, чтобы сделать текст больше или полужирным, потому что они используются для доступности и других целей, таких как SEO. Постарайтесь создать на своих страницах осмысленную последовательность заголовков, не пропуская уровни.</p><h4><span class="ez-toc-section" id="i-39"> Пункты </span></h4><p> Как объяснялось выше, элементы <code><p> </code> предназначены для содержания абзацев текста; вы будете часто использовать их при разметке обычного текстового содержимого:</p><pre> <code> <p> Это один абзац </p> </code> </pre><p> Добавьте образец текста (он должен быть из <em> Как будет выглядеть ваш веб-сайт? </em>) в один или несколько абзацев, поместив их непосредственно под элементом <code> <img> </code>.</p><h4><span class="ez-toc-section" id="i-40"> Списки </span></h4><p> Большая часть веб-контента представляет собой списки, и в HTML есть специальные элементы для них. Списки разметки всегда состоят как минимум из двух элементов. Наиболее распространенные типы списков - это упорядоченные и неупорядоченные списки:</p><ol><li> <strong> Неупорядоченные списки </strong> предназначены для списков, в которых порядок элементов не имеет значения, например, список покупок.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/900igr.net/up/datas/148291/050.jpg' style='float: right;' /><noscript><img src='/800/600/http/900igr.net/up/datas/148291/050.jpg' style='float: right;' /></noscript> Они заключены в элемент <code><ul> </code>.</li><li> <strong> Упорядоченные списки </strong> предназначены для списков, в которых порядок элементов имеет значение, например рецепт.Они заключены в элемент <code><ol> </code>.</li></ol><p> Каждый элемент внутри списков помещается в элемент <code><li> </code> (элемент списка).</p><p> Например, если мы хотим превратить часть следующего фрагмента абзаца в список</p><pre> <code> <p> В Mozilla мы - глобальное сообщество технологов, мыслителей и строителей, работающих вместе ... </p> </code> </pre><p> Мы можем изменить разметку до</p><pre> <code> <p> В Mozilla мы являемся глобальным сообществом </p> <ul> <li> технологи </li> <li> мыслители </li> <li> строители </li> </ul> <p> работаем вместе... </p> </code> </pre><p> Попробуйте добавить упорядоченный или неупорядоченный список на страницу с примером.</p><p> Ссылки очень важны - они делают Интернет Интернетом! Чтобы добавить ссылку, нам нужно использовать простой элемент - <code> <a> </code> - «a» является сокращенной формой для «привязки».<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/www.getfoundquick.com/wp-content/uploads/2019/09/shutterstock_161890766.jpg' style='float: right;' /><noscript><img src='/800/600/https/www.getfoundquick.com/wp-content/uploads/2019/09/shutterstock_161890766.jpg' style='float: right;' /></noscript> Чтобы превратить текст в абзаце в ссылку, выполните следующие действия:</p><ol><li> Выберите текст. Мы выбрали текст «Манифест Mozilla».</li><li> Оберните текст в элемент <code> <a> </code>, как показано ниже:<pre> <code> <a> Манифест Mozilla </a> </code> </pre></li><li> Присвойте элементу <code> <a> </code> атрибут <code> href </code>, как показано ниже:<pre> <code> <a href=""> Манифест Mozilla </a> </code> </pre></li><li> Введите в значение этого атрибута веб-адрес, на который должна быть ссылка:<pre> <code> <a href = "https: // www.mozilla.org/en-US/about/manifesto/"> Манифест Mozilla </a> </code> </pre></li></ol><p> Вы можете получить неожиданные результаты, если опустите часть <code> https: // </code> или <code> http: // </code>, называемую протоколом <em> </em>, в начале веб-адреса. После создания ссылки щелкните ее, чтобы убедиться, что она отправляет вам туда, куда вы хотели.</p><p> <code> href </code> сначала может показаться довольно неясным выбором имени атрибута.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/alterweb.by/img/news/data/58a3149447c13c5fddeba361a404b7a2.png' style='float: right;' /><noscript><img src='/800/600/https/alterweb.by/img/news/data/58a3149447c13c5fddeba361a404b7a2.png' style='float: right;' /></noscript> Если у вас возникли проблемы с его запоминанием, помните, что это означает <em> <strong> h </strong> ypertext <strong> ref </strong> erence </em>.</p><p> Добавьте ссылку на свою страницу сейчас, если вы еще этого не сделали.</p><p> Если вы следовали всем инструкциям в этой статье, у вас должна получиться страница, похожая на приведенную ниже (вы также можете просмотреть ее здесь):</p><p></p><p> Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.</p><p> Здесь мы только прикоснулись к HTML. Чтобы узнать больше, перейдите в нашу тему «Изучение HTML».</p><h2><span class="ez-toc-section" id="_HTML-17"> Как создать HTML-страницу </span></h2><p> Файл HTML - это просто текстовый файл, сохраненный с расширением.html или .htm расширение.</p><h3><span class="ez-toc-section" id="i-41"> Начало работы </span></h3><p> Из этого туториала Вы узнаете, как легко создать HTML-документ или веб-страницу.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/myslide.ru/documents_3/f4209a281101e5c9e459d1b491c3999b/img90.jpg' style='float: right;' /><noscript><img src='/800/600/https/myslide.ru/documents_3/f4209a281101e5c9e459d1b491c3999b/img90.jpg' style='float: right;' /></noscript> Чтобы начать кодировать HTML, вам понадобятся всего две вещи: простой текстовый редактор и веб-браузер.</p><p> Итак, приступим к созданию вашей первой HTML-страницы.</p><h3><span class="ez-toc-section" id="_HTML-18"> Создание вашего первого HTML-документа </span></h3><p> Давайте рассмотрим следующие шаги. В конце этого руководства вы создадите HTML-файл, который отображает сообщение «Hello world» в вашем веб-браузере.</p><h4><span class="ez-toc-section" id="_1_HTML"> Шаг 1. Создание файла HTML </span></h4><p> Откройте текстовый редактор вашего компьютера и создайте новый файл.</p><p> <strong> Совет: </strong> Мы предлагаем вам использовать Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, такие как Adobe Dreamweaver.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/ruinterbiz.ru/wp-content/uploads/2017/11/kak-sozdat-ssilku-v-menu-lendinga-300x164.png' style='float: right;' /><noscript><img src='/800/600/https/ruinterbiz.ru/wp-content/uploads/2017/11/kak-sozdat-ssilku-v-menu-lendinga-300x164.png' style='float: right;' /></noscript></p><h4><span class="ez-toc-section" id="_2_HTML"> Шаг 2. Введите HTML-код </span></h4><p> Начните с пустого окна и введите следующий код:</p><pre> <code> <! DOCTYPE html> <html lang = "ru"> <head> <title> Простой HTML-документ Привет, мир!

Шаг 3: Сохранение файла
Теперь сохраните файл на рабочем столе как «myfirstpage.html ".
Примечание: Важно указать расширение .html - в противном случае некоторые текстовые редакторы, такие как Блокнот, автоматически сохранят его как . txt .
Открыть файл в браузере. Перейдите к своему файлу и дважды щелкните по нему.Он откроется в вашем веб-браузере по умолчанию. Если это не так, откройте браузер и перетащите в него файл.
Расшифровка кода
Вы можете подумать, что это за код. Что ж, давайте узнаем.
Первая строка - это объявление типа документа. Он сообщает веб-браузеру, что этот документ является документом HTML5. Регистр не учитывается.
Элемент - это контейнер для тегов, который предоставляет информацию о документе, например, тег </code> определяет заголовок документа.</li><li> Элемент <code><body> </code> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. Д.), Которое отображается в веб-браузере и отображается для пользователя.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/intuit.ru/EDI/13_04_18_1/1523571786-30342/tutorial/304/objects/10/files/10_2.png' style='float: right;' /><noscript><img src='/800/600/https/intuit.ru/EDI/13_04_18_1/1523571786-30342/tutorial/304/objects/10/files/10_2.png' style='float: right;' /></noscript></li></ul><p> Вы узнаете о различных элементах HTML подробно в следующих главах. А пока просто сосредоточьтесь на базовой структуре HTML-документа.</p><p> <strong> Примечание: </strong> Объявление DOCTYPE появляется в верхней части веб-страницы перед всеми другими элементами; однако само объявление doctype не является тегом HTML.Каждый документ HTML требует объявления типа документа, чтобы гарантировать правильное отображение ваших страниц.</p><p> <strong> Совет: </strong> Теги <code><html> </code>, <code><head> </code> и <code><body> </code> составляют базовый скелет каждой веб-страницы. Содержимое внутри <code><head> </code> и <code></head> </code> невидимо для пользователей за одним исключением: текст между тегами <code><title> </code> и <code> , который отображается как заголовок на вкладке браузера.
Теги и элементы HTML
HTML написан в виде HTML-элементов, состоящих из тегов разметки. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например , , , </code>, <code><p> </code> и т. Д.</p> HTML-теги<p> обычно идут парами, например <code><html> </code> и <code></html> </code>. Первый тег в паре часто называется открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом).</p><p> Открывающий тег и закрывающий теги идентичны, за исключением косой черты (<code>/</code>) после открывающей угловой скобки закрывающего тега, чтобы сообщить браузеру, что команда выполнена.</p><p> Между начальным и конечным тегами вы можете разместить соответствующее содержимое.<img class="lazy lazy-hidden" src="//ylianova.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/raw.githubusercontent.com/adgaver/mytetra_base_New/master/base/1483630171lfjlzslxy8/image16821.png' style='float: right;' /><noscript><img src='/800/600/https/raw.githubusercontent.com/adgaver/mytetra_base_New/master/base/1483630171lfjlzslxy8/image16821.png' style='float: right;' /></noscript> Например, абзац, который представлен элементом <code> p </code>, будет записан как:</p><pre> <code> <p> Это абзац. </p> <! - Абзац с вложенным элементом -> <p> Это <b> еще один </b> абзац. </p> </code> </pre><p> Вы узнаете о различных элементах HTML в следующей главе.</p><h2><span class="ez-toc-section" id="_HTML5"> Шаблон HTML5: базовый шаблон для любого проекта </span></h2><p> <strong> По мере того, как вы изучаете HTML5 и добавляете новые методы в свой набор инструментов, вы, вероятно, захотите создать себе шаблон HTML для начала всех ваших будущих проектов. Мы поощряем это, и в Интернете есть множество отправных точек, которые помогут вам создать собственный HTML-шаблон. </strong></p><p> В этой статье мы рассмотрим, с чего начать.Давайте начнем с простой страницы HTML5:</p><pre tabindex="0"> <code> <! Doctype html> <html lang = "ru"> <head> <meta charset = "utf-8"> <title> Вестник HTML5 css? v = 1.0">
Имея этот базовый шаблон, давайте теперь рассмотрим некоторые важные части разметки и то, как они могут отличаться от того, как HTML был написан до HTML5.
Доктип
Во-первых, у нас есть декларация типа документа или doctype . Это просто способ сообщить браузеру или любому другому синтаксическому анализатору, какой тип документа он просматривает. В случае файлов HTML это означает конкретную версию и разновидность HTML. Тип документа всегда должен быть первым элементом в начале любого файла HTML. Много лет назад объявление doctype было уродливым и трудно запоминающимся беспорядком. Для XHTML 1.0 Strict:

И для переходного HTML4:
01 Transitional // EN" "https://www.w3.org/TR/html4/loose.dtd">
Хотя эта длинная строка текста в верхней части наших документов на самом деле не причинила нам никакого вреда (кроме того, что заставила посетителей нашего сайта загружать несколько дополнительных байтов), HTML5 покончил с этой неразборчивой болью на глазу. Теперь все, что вам нужно, это:

Просто и по делу.Тип документа может быть написан в верхнем, нижнем или смешанном регистре. Вы заметите, что цифра 5 в декларации явно отсутствует. Хотя текущая версия веб-разметки известна как «HTML5», на самом деле это просто эволюция предыдущих стандартов HTML, а будущие спецификации будут просто развитием того, что мы имеем сегодня.
Поскольку браузеры обычно обязаны поддерживать весь существующий контент в Интернете, нет необходимости полагаться на doctype, чтобы сообщить им, какие функции должны поддерживаться в данном документе.Другими словами, один тип документа не сделает ваши страницы совместимыми с HTML5. Это действительно зависит от браузера. Фактически, вы можете использовать один из этих двух старых типов документа с новыми элементами HTML5 на странице, и страница будет отображаться так же, как если бы вы использовали новый тип документа.
Элемент
html
Следующим шагом в любом HTML-документе является элемент html , который существенно не изменился в HTML5. В нашем примере мы включили атрибут lang со значением en , которое указывает, что документ составлен на английском языке.В синтаксисе на основе XHTML вам потребуется включить атрибут xmlns . В HTML5 это больше не нужно, и даже атрибут lang не нужен для правильной проверки или правильной работы документа.
Итак, вот что у нас есть, включая закрывающий тег :

Головка
Элемент
Следующая часть нашей страницы - это раздел . Первая строка внутри заголовка - это строка, которая определяет кодировку символов для документа. Это еще один элемент, который был упрощен со времен XHTML и HTML4, и является дополнительной функцией, но рекомендуется. Раньше вы могли писать так:

HTML5 улучшает это, сокращая кодировку символов тега до минимума:

Почти во всех случаях utf-8 - это значение, которое вы будете использовать в своих документах.Полное объяснение кодировки символов выходит за рамки этой статьи, и, вероятно, вам это тоже не будет интересно. Тем не менее, если вы хотите погрузиться немного глубже, вы можете прочитать эту тему на W3C или WHATWG.
Примечание: чтобы гарантировать, что все браузеры правильно читают кодировку символов, полное объявление кодировки символов должно быть включено где-то в пределах первых 512 символов вашего документа. Он также должен располагаться перед любыми элементами, основанными на содержании (например, элементом </code>, который следует за ним в нашем примере сайта) </em>.</p><p> Мы могли бы написать гораздо больше на эту тему, но мы хотим, чтобы вы не заснули, поэтому избавим вас от этих подробностей! А пока мы согласны принять это упрощенное заявление и переходим к следующей части нашего документа:</p><pre tabindex="0"> <code> <title> Вестник HTML5
В этих строках HTML5 практически не отличается от предыдущего синтаксиса.Заголовок страницы (единственный обязательный элемент в заголовке head ) объявлен таким же, как и всегда, а включенные нами метатеги являются просто необязательными примерами, указывающими, где они будут размещены; вы можете разместить здесь столько действительных элементов meta , сколько захотите.
Ключевой частью этого фрагмента разметки является таблица стилей, которая включается с помощью обычного элемента link . Для link нет обязательных атрибутов, кроме href и rel .Атрибут типа (который был обычным в старых версиях HTML) не является обязательным, и он никогда не был необходим для указания типа содержимого таблицы стилей.
Выравнивание игрового поля
Когда был представлен HTML5, он включал ряд новых элементов, таких как статья и раздел . Вы могли подумать, что это серьезная проблема для поддержки нераспознанных элементов старым браузером, но ошиблись. Это потому, что большинство браузеров не заботятся о том, какие теги вы используете.Если у вас есть HTML-документ с тегом recipe (или даже тегом ziggy ) в нем, и ваш CSS прикрепил некоторые стили к этому элементу, почти каждый браузер будет работать так, как если бы это было совершенно нормально, применяя ваш стиль без жалоба.
Конечно, такой гипотетический документ не сможет пройти проверку и может иметь проблемы с доступностью, но он будет правильно отображаться почти во всех браузерах, за исключением старых версий Internet Explorer (IE). До версии 9 IE предотвращал получение стиля нераспознанными элементами.Эти загадочные элементы воспринимались механизмом визуализации как «неизвестные элементы», поэтому вы не могли изменить их внешний вид или поведение. Сюда входят не только наши воображаемые элементы, но и любые элементы, которые еще не были определены на момент разработки этих версий браузеров. Это означает (как вы уже догадались) новые элементы HTML5.
Хорошая новость заключается в том, что в наши дни использование IE сразу упало, при этом глобальное использование IE11 упало примерно до 2,7% (по состоянию на 2018 год), а версии до этого практически исчезли с рынка.(Вы можете просмотреть статистику использования браузера и поддержки функций HTML5 в целом на сайте Могу ли я использовать. )
Если вам действительно требуется поддержка старых браузеров, вы все равно можете использовать надежный HTML5 Shiv, очень простой фрагмент JavaScript, первоначально разработанный Джоном Ресигом. Вдохновленный идеей Sjoerd Visscher, он сделал новые элементы HTML5 стилизованными в более старых версиях IE. На самом деле, сейчас в этом не должно быть необходимости. Как указано в разделе «Могу ли я использовать», элементы HTML5 поддерживаются всеми современными браузерами и даже их самыми последними более старыми версиями.(Нажмите «Показать все», чтобы увидеть все версии браузеров.) Единственное исключение - некоторые браузеры не распознают новый основной элемент . Однако для этих браузеров вы все равно можете использовать этот элемент, если добавите подходящий стиль (например, установите его как блочный элемент).
Остальное - история
Глядя на остальную часть нашего начального шаблона, у нас есть обычный элемент body вместе с его закрывающим тегом и закрывающим тегом html . У нас также есть ссылка на файл JavaScript внутри элемента script .
Подобно тегу link , обсуждавшемуся ранее, тег
Поскольку JavaScript для всех практических целей является единственным реальным языком сценариев, используемым в Интернете, и поскольку все браузеры предполагают, что вы используете JavaScript, даже если вы явно не заявляете об этом факте, атрибут типа не нужен в документах HTML5:

Мы разместили элемент script внизу нашей страницы, чтобы соответствовать лучшим практикам встраивания JavaScript. Это связано со скоростью загрузки страницы; когда браузер встречает скрипт, он приостанавливает загрузку и рендеринг остальной части страницы, пока он анализирует скрипт. Это приводит к тому, что страница загружается намного медленнее, когда большие скрипты включаются в верхнюю часть страницы перед любым содержимым. Вот почему большинство скриптов следует размещать в самом низу страницы, чтобы они анализировались только после загрузки остальной части страницы.
Однако в некоторых случаях (например, с HTML5 shiv) скрипту может потребоваться для размещения в заголовке вашего документа, потому что вы хотите, чтобы он вступил в силу до того, как браузер начнет отображать страницу.
Следующие шаги
Отличный способ поднять ваши веб-макеты на новый уровень - это Принципы красивого веб-дизайна, 4-е издание. Эта книга научит вас принципам дизайна. и покажут, как реализовать их для Интернета. Он был полностью переписан в сентябре 2020 года и включает в себя передовые методы, о которых вы больше нигде не читали.
Чтобы отточить свои знания CSS, наша учебная программа по современным проектам CSS поможет вам освоить новейшие, расширенные версии CSS3.
Помимо этого, вы можете вывести свой веб-сайт или веб-приложение на новый уровень с помощью интерактивности и программного, реактивного пользовательского интерфейса. Посмотрите, например, обширные ресурсы SitePoint по JavaScript и React. И узнайте, как быстрее начинать новые проекты, с помощью нашего руководства по лучшим веб-инструментам и библиотекам для создания строительных лесов. Или же, если вы хотите создавать веб-приложения без обучения программированию, прочитайте наш учебник по движению без кода.Последняя волна инструментов без кода изменила правила игры - впервые они стали достаточно мощными, чтобы обеспечить серьезную альтернативу кодированию во многих ситуациях.
HTML | Основы - GeeksforGeeks
В этой статье мы рассмотрим все основные моменты кодирования HTML. Существуют различные теги, которые мы должны учитывать и включать при запуске кода в HTML. Эти теги помогают в организации и базовом форматировании элементов нашего скрипта или веб-страниц. Эти пошаговые процедуры проведут вас через процесс написания HTML.
Базовый документ HTML
Ниже перечислены основные теги HTML, которые разделяют весь документ на различные части, такие как голова, тело и т. Д.
Каждый документ HTML начинается с тега документа HTML. Хотя это не обязательно, но рекомендуется начинать документ с указанного ниже тега:

: каждый код HTML должен быть заключен между основными тегами HTML.Он начинается с и заканчивается тегом .
: Далее идет тег заголовка, который содержит всю информацию заголовка веб-страницы или документа, такую как заголовок страницы и другую разную информацию. Эта информация заключена в тег заголовка, который открывается с и заканчивается . Конечно, содержимое этого тега будет объяснено в следующих разделах.
: </strong> Мы можем указать заголовок веб-страницы с помощью тега <strong><title> </strong>. Это информация заголовка и, следовательно, упоминается в тегах заголовка. Тег начинается с <strong><title> </strong> и заканчивается <strong>
: Следующий шаг - самый важный из всех тегов, которые мы изучили до сих пор. Тег body содержит фактическое тело страницы, которое будет видно всем пользователям. Он открывается с и заканчивается .Каждый контент, заключенный в этот тег, будет отображаться на веб-странице, будь то записи, изображения, аудио, видео или даже ссылки. Позже в этом разделе мы увидим, как с помощью различных тегов мы можем вставлять упомянутое содержимое на наши веб-страницы.
Весь шаблон кода будет выглядеть примерно так:
< HTML >
< Головка >

< название > GeeksforGeeks название >
голова >
< корпус >

корпус >
html >
Этот код ничего не отображает. Он просто показывает базовый шаблон того, как написать HTML-код, и назовет заголовок страницы как GeeksforGeeks . - это тег комментария в HTML, и он не читает строку внутри этого тега.
HTML-заголовков
Эти теги помогают нам давать заголовки содержанию веб-страницы. Эти теги в основном записываются внутри тега body. HTML предоставляет нам шесть тегов заголовков от
до
.Каждый тег отображает заголовок в своем стиле и размере шрифта.
Пример :
< HTML >
< Головка >
< название > GeeksforGeeks название >
голова >
< корпус >
< h2 > Привет, GeeksforGeeks h2 >
< h3 > Привет, GeeksforGeeks h3 >
< h4 > Привет, GeeksforGeeks h4 >
< h5 > Привет, GeeksforGeeks h5 >
< h5 > Привет, GeeksforGeeks h5 >
< h6 > Привет, GeeksforGeeks h6 >
корпус >
html >
Выход :
HTML Параграф
Эти теги помогают нам писать абзацы на веб-странице. Они начинаются с тега
и заканчиваются
. Здесь тег
используется для разрыва строки и действует как возврат каретки.
- пустой тег.
Пример :
< HTML >
< Головка >
< название > GeeksforGeeks название >
голова >
< корпус >
< h2 > Привет, GeeksforGeeks h2 >
< p >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
p >
корпус >
html >
Выход :
Горизонтальные строки HTML
Тег
используется для разделения страницы на различные части, создавая горизонтальные поля с помощью горизонтальной линии, проходящей слева направо от страницы. Это также пустой тег и не принимает никаких дополнительных операторов.
Пример :
< HTML >
< Головка >
< название > GeeksforGeeks название >
голова >
< корпус >
< h2 > Привет, GeeksforGeeks h2 >
< p >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
p >
< час >
< p >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
p >
< час >
< p >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
Портал информатики для вундеркиндов < br >
p >
< час >
корпус >
html >
Выход :
изображений HTML
Тег изображения используется для вставки изображения на нашу веб-страницу. Источник вставляемого изображения помещается в тег source_of_image “> .
Пример :
Вывод :

В HTML также есть различные другие теги для вставки ссылок, аудио и различных других тегов форматирования, которые мы изучим в следующих разделах.
Автор статьи Чинмой Ленка . Если вам нравится GeeksforGeeks, и вы хотели бы внести свой вклад, вы также можете написать статью, используя вклад.geeksforgeeks.org или отправьте свою статью по адресу [email protected]. Посмотрите свою статью на главной странице GeeksforGeeks и помогите другим гикам.
Пожалуйста, напишите комментарий, если вы обнаружите что-то неправильное, или если вы хотите поделиться дополнительной информацией по теме, обсужденной выше.

1. Создание вашей первой страницы
Глава 1. Создание вашей первой страницы
Каждый веб-сайт представляет собой набор веб-страниц, поэтому неудивительно, что ваше путешествие по созданию законченного сайта начинается здесь , с написанием одной веб-страницы.
Технически веб-страница - это особый тип документа, написанный на компьютерном языке, который называется HTML (это сокращение от HyperText Markup Language). Веб-страницы написаны для веб-браузеров - таких программ, как Internet Explorer, Google Chrome и Safari. У этих браузеров простая, но чрезвычайно важная задача: они читают HTML в документе веб-страницы и отображают идеально отформатированный результат, который вы можете прочитать.
Эта глава познакомит вас с HTML. Вы увидите, как работает простая веб-страница, и узнаете, как создать свою собственную.На данный момент вы будете работать с веб-страницами, хранящимися на вашем компьютере, которые будут видны только вам. Позже, в главе 9, вы научитесь размещать веб-страницы в Интернете, чтобы их мог видеть любой, у кого есть подключение к Интернету.
HTML: язык Интернета
HTML - самый важный стандарт в веб-дизайне, и единственный, который абсолютно требует , если вы планируете создать веб-страницу. Каждая веб-страница написана в HTML. Неважно, содержит ли ваша страница серию записей в блоге, дюжину изображений вашего домашнего лемура или сильно отформатированный сценарий - скорее всего, если вы просматриваете его в браузере, это страница HTML.
HTML играет ключевую роль на веб-страницах: он сообщает браузерам, как отображать содержимое страницы, с помощью специальных инструкций, называемых тегами , которые сообщают браузеру, когда начинать абзац, выделять слово курсивом или отображать изображение. Чтобы создавать свои собственные веб-страницы, вам нужно научиться использовать это семейство тегов.
HTML - настолько важный стандарт, что вы потратите значительную часть этой книги на изучение его функций, изысков и случайных недостатков. Каждая веб-страница, которую вы создаете, будет настоящим HTML-документом.
Примечание
Стандарт HTML не имеет ничего общего с тем, как веб-браузер извлекает страницу в Интернете. Эта задача возложена на другой стандарт, называемый HTTP (протокол передачи гипертекста), который представляет собой коммуникационную технологию, позволяющую двум компьютерам обмениваться данными через Интернет. Если использовать аналогию с телефонным разговором, то телефонные провода представляют собой протокол HTTP, а пикантные сплетни, которыми вы обмениваетесь с тетей Мартой, - это документы HTML.
Взлом Открытие файла HTML
Внутри HTML-страница на самом деле не что иное, как простой текстовый файл.Это означает, что исходный код каждой создаваемой веб-страницы будет полностью состоять из букв, цифр и нескольких специальных символов (например, пробелов, знаков препинания и всего остального, что вы можете заметить на клавиатуре). На рис. 1.1 представлен анализ обычного (и очень простого) HTML-документа.
Вот один из секретов написания веб-страниц: вам не нужен действующий веб-сайт, чтобы начать создавать свои собственные веб-страницы. Это потому, что вы можете легко создавать и тестировать страницы, используя только свой компьютер. Фактически, вам даже не нужно подключение к Интернету.Единственные необходимые вам инструменты - это простой текстовый редактор и стандартный веб-браузер.
Текстовый редактор позволяет вам создавать или редактировать HTML-файл (в окне, подобном тому, которое вы видите на Рисунке 1-1 внизу). Даже многие профессиональные веб-дизайнеры придерживаются простых инструментов для редактирования текста. Существует множество более изящных инструментов редактирования, разработанных специально для редактирования веб-сайтов, но на самом деле вам не понадобится ни одного из них. И если вы начнете использовать их слишком рано, вы, скорее всего, в конечном итоге утонете в море дополнительных изысков и функций, прежде чем действительно поймете, как работает HTML.
Рисунок 1-1. Каждый документ HTML на самом деле представляет собой обычный текстовый файл. Вверху: веб-браузер отображает простой HTML-документ, демонстрируя все его великолепное форматирование. Внизу: Но когда вы открываете тот же документ в текстовом редакторе, вы видите весь текст из исходного документа, а также несколько дополнительных фрагментов информации внутри угловых скобок <> . Эти HTML-теги передают информацию о структуре и форматировании документа.
Тип используемого вами текстового редактора зависит от операционной системы вашего компьютера:
Если у вас компьютер Windows, вы используете простой редактор Notepad.Переходим к следующему разделу.
Если у вас компьютер Mac, вы используете встроенный редактор TextEdit. Но сначала вам нужно внести коррективы, описанные ниже.
Поклонникам Mac необходимо настроить способ работы TextEdit, потому что программа имеет «HTML-представление», которое скрывает теги в файле HTML и вместо этого показывает отформатированную страницу. Такое поведение направлено на упрощение жизни новичков, но представляет серьезную опасность для всех, кто хочет написать настоящую веб-страницу.Чтобы избежать путаницы и убедиться, что вы пишете настоящий, необработанный HTML, вам необходимо отключить просмотр HTML. Вот как это сделать:
Выберите TextEdit → Настройки .
Откроется окно с вкладками параметров TextEdit (рис. 1-2).
Рисунок 1-2. В окне настроек TextEdit есть две вкладки с настройками: «Новый документ» (слева) и «Открыть и сохранить» (справа).
Щелкните «Новый документ», а затем в разделе «Формат» выберите «Обычный текст.”
Это указывает TextEdit начать вас с обычного неформатированного текста и отказаться от панели инструментов форматирования и линейки, которые в противном случае появлялись бы на экране, которые не имеют отношения к созданию файлов HTML.
Нажмите «Открыть и сохранить» и включите первый вариант «Отображать файлы HTML как HTML-код вместо форматированного текста».
Это указывает TextEdit, что вы можете видеть (и редактировать) реальную разметку HTML, теги и все остальное, а не отформатированную версию страницы, как она будет отображаться в веб-браузере.
Закройте окно настроек, а затем закройте TextEdit .
Теперь, когда вы в следующий раз запустите TextEdit, вы начнете в режиме обычного текста, который использует каждый уважающий себя веб-разработчик.
Как вы, несомненно, знаете, веб-браузер - это программа, которая позволяет вам переходить и отображать веб-страницы. Без браузеров Интернет все еще существовал бы, но вы не смогли бы его увидеть.
Работа браузера на удивление проста - фактически, основная часть его работы состоит из двух задач.Во-первых, он запрашивает веб-страницы, что происходит, когда вы вводите адрес веб-сайта (например, www.google.com) или щелкаете ссылку на веб-странице. Браузер отправляет этот запрос на удаленный компьютер, называемый веб-сервером . Сервер, как правило, намного мощнее домашнего компьютера, поскольку ему необходимо одновременно обрабатывать несколько запросов браузера. Сервер принимает во внимание эти запросы и отправляет обратно содержимое желаемых веб-страниц.
Когда браузер получает этот контент, он применяет свой второй навык, и отображает или рисует веб-страницу. Технически это означает, что браузер преобразует простой текст, который он получает от сервера, в отображаемый документ на основе инструкций по форматированию, встроенных в страницу. Конечным результатом является страница с богатой графикой с разными шрифтами, цветами и ссылками. Рисунок 1-3 иллюстрирует этот процесс.
Рисунок 1-3. Веб-браузер предназначен для очень хороших двух вещей: связываться с удаленными компьютерами, чтобы запросить веб-страницы, а затем отображать эти страницы на вашем компьютере.
Хотя вы обычно запрашиваете в браузере поиск страниц из Интернета, вы также можете использовать его для просмотра веб-страниц, хранящихся на вашем компьютере, что особенно удобно, когда вы тренируете свои навыки работы с HTML.Фактически, ваш компьютер уже знает, что файлы, заканчивающиеся на .htm или .html , содержат содержимое веб-страниц. Поэтому, если вы дважды щелкните один из этих файлов, ваш компьютер автоматически запустит веб-браузер. (Вы можете получить тот же результат, перетащив файл веб-страницы в уже открытое окно браузера. )
Хотя обычным людям нужен только один веб-браузер, это хорошая идея для обучающихся веб-разработчиков (например, себя), чтобы ознакомиться с наиболее распространенными браузерами (см. рис. 1-4).Это потому, что, когда вы разрабатываете свой веб-сайт, вам нужно подготовиться к работе с широкой аудиторией людей с разными браузерами. Чтобы ваши красивые страницы не выглядели странными, когда на них смотрят другие люди, вам следует протестировать свой сайт с использованием различных браузеров, размеров экрана и операционных систем.
В следующем списке описаны самые популярные браузеры на сегодняшний день:
Google Chrome - нынешний король веб-браузеров, несмотря на то, что это самый новый ребенок на рынке.Технически подкованные поклонники Интернета любят его функции, такие как закладки, которые можно синхронизировать на разных компьютерах, и его невероятную скорость.
Загрузите Google Chrome на www.google.com/chrome.
Internet Explorer - это самый долговечный браузер и официальный стандарт во многих корпоративных и правительственных средах. Кроме того, это браузер, который предустановлен в Windows, поэтому его используют люди, не являющиеся техническими специалистами, если они не хотят (или не знают, как) устанавливать что-то новое.Даже горячие веб-дизайнеры должны проверять, понимает ли Internet Explorer их страницы, потому что даже старые версии IE, такие как IE 8, остаются популярными.
Чтобы загрузить самую последнюю версию Internet Explorer, посетите www.microsoft.com/ie.
Рисунок 1-4. Статистика использования браузера, которая оценивает процент людей, использующих каждый из основных браузеров, варьируется в зависимости от того, какие сайты вы изучаете и как подсчитываете посетителей, но на момент написания этой статьи это одна разумная оценка. (Чтобы узнать текущую статистику использования браузера, посетите http: // tinyurl.com / stats-browsers.)
Firefox зародился как современный ответ Internet Explorer. Он по-прежнему впереди всех со своими невероятно гибкими надстройками , крошечными программами, которые другие люди разрабатывают для улучшения Firefox с дополнительными функциями, такими как уведомление веб-почты и эскизы сайтов, которые отображаются на странице результатов поиска. Лучше всего то, что армия программистов-добровольцев постоянно поддерживает Firefox в актуальном состоянии.
Попробуйте Firefox на www.mozilla.org / firefox.
Safari - это браузер, разработанный Apple, который поставляется с текущими версиями операционной системы Mac OS. В таких продуктах Apple, как iPhone, iPad и iPod Touch, также используется браузер Safari (хотя и в мобильной версии, которая ведет себя немного иначе). Прекрасные люди из Apple создали воплощение Safari для компьютеров с Windows, но с тех пор отказались от него, сделав Safari доступным только для Apple.
Зайдите в Safari по адресу www.apple.com/safari.
Opera - это упрощенный и простой в установке браузер, который существует уже более десяти лет и служит противоядием от огромных размеров и бессмысленных излишеств Internet Explorer.В течение многих лет Opera сдерживалось из-за досадной детали: если вы хотели версию без рекламы, вам нужно было заплатить. Сегодня Opera бесплатна и не содержит рекламы, как и другие браузеры из этого списка. У него немного, но преданных последователей, но он занимает пятое место в рейтинге веб-браузеров.
Посетите Opera на сайте www.opera.com.
Учебное пособие: создание файла HTML
Теперь, когда вы подготовили свою веб-кухню, вы готовы создать свою собственную веб-страницу. В этом руководстве вы создадите базовую страницу, показанную на рис. 1-1.
Совет
Как и все учебные пособия в этой книге, вы найдете решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с названием Tutorial-1-1 (что означает «Глава 1, первое руководство», если вам интересно).
Готовы начать? Вот что нужно сделать:
Запустите текстовый редактор .
На компьютере под управлением Windows это Блокнот. Чтобы открыть Блокнот, нажмите кнопку «Пуск», введите «блокнот», а затем щелкните появившийся значок Блокнота.
На Mac это TextEdit. Чтобы запустить его, перейдите в папку «Приложения» и дважды щелкните TextEdit.
Когда вы загружаете текстовый редактор, он запускает вас с новым пустым документом, а это именно то, что вам нужно.
Начните писать свой HTML-код .
Эта задача немного сложна, поскольку вы еще не знакомы со стандартом HTML. Погодите - до конца этой главы помощь будет готова. На данный момент вы можете использовать следующий очень простой фрагмент HTML.Просто введите его в том виде, в каком он выглядит: текст, косые черты, заостренные скобки и все такое:

United Popsicle Workers Union

Мы боремся за ваши права.

Технически, в этом двухстрочном документе отсутствуют некоторые структурные детали, которые должны иметь уважаемые веб-страницы. Однако любой браузер может прочитать этот фрагмент HTML и правильно интерпретировать то, что вы хотите: две строки форматированного текста, показанные на рис. 1-1 вверху.
Когда вы закончите свою веб-страницу, выберите Файл → Сохранить .
Это вызывает окно «Сохранить» или «Сохранить как», в котором вы вводите данные для нового файла (рис. 1-5).
Рисунок 1-5. Независимо от того, используете ли вы Блокнот (показан здесь) или TextEdit, в сохранении файла нет ничего сложного. Просто не забудьте включить «.htm» или «.html» в конце имени файла, чтобы идентифицировать его как документ HTML.
Выберите место для сохранения файла и дайте ему имя popsicles.htm .
Если вы не знаете, где хранить файл, пока можете сохранить его прямо на рабочем столе.
Когда вы называете файл, убедитесь, что вы добавили расширение .htm или .html в конце имени файла. Например, используя имя popsicles.htm или popsicles.html , вы гарантируете, что ваш компьютер распознает ваш документ как файл HTML.
Примечание для параноиков: нет разницы между файлами .htm и .html. Оба они на 100% одинаковы - текстовые файлы, содержащие HTML-контент.
Примечание
С технической точки зрения вы можете использовать любое расширение файла, какое захотите.Однако использование .htm или .html избавляет от путаницы (вы сразу понимаете, что файл является веб-страницей) и помогает избежать распространенных проблем. Например, использование расширения файла .htm или .html гарантирует, что когда вы дважды щелкните имя файла, ваш компьютер будет знать, что нужно открыть его в веб-браузере, а не в какой-либо другой программе. Также важно использовать расширение .htm или .html, если вы планируете загружать файлы на веб-сервер; колючие серверы могут отказываться выдавать страницы с нестандартными расширениями файлов.
При необходимости измените способ кодирования файла в текстовом редакторе на UTF-8 .
Это стандарт TextEdit, поэтому пользователи Mac могут пропустить этот шаг. Но в «Блокноте» вам нужно выбрать UTF-8 в списке «Кодировка» внизу окна «Сохранить как».
Ваша веб-страница будет работать, даже если вы не сделаете этого шага, но это гарантирует, что вы не столкнетесь с проблемами, если вы используете специальные символы или другой язык на своей странице.
Нажмите «Сохранить», чтобы сделать его официальным .
Если вы используете TextEdit, программа может спросить, действительно ли вы хотите использовать .htm или .html вместо .txt , стандартного текстового файла; нажмите «Использовать .htm». В Блокноте такой шаг не требуется. Однако вы не увидите свои HTML-файлы в списке, если не выберете «Все файлы (*. *)» В поле «Сохранить как тип» (в котором изначально выбрано «Текстовые документы (* .txt)»).
Чтобы просмотреть свою работу, откройте файл в браузере (рис. 1-6) .
Если вы используете расширение .htm или .html, открыть страницу обычно так же просто, как дважды щелкнуть имя файла.Или вы можете перетащить файл веб-страницы в открытое окно браузера.
Рисунок 1-6. Адресная строка браузера показывает, где на самом деле находится текущая веб-страница. Если в адресе вы видите «http: //», это значит, что он исходит от веб-сервера в Интернете (вверху). Если вы посмотрите на веб-страницу, которая находится на вашем собственном компьютере, вы увидите обычный адрес локального файла (посередине, показывающий расположение файла Windows в Internet Explorer), или вы увидите URL-адрес, который начинается с префикса «file: // / ”(Внизу показано расположение файла в Chrome).
По окончании редактирования закройте текстовый редактор .
В следующий раз, когда вы захотите изменить документ, просто запустите текстовый редактор, выберите «Файл» → «Открыть», а затем выберите нужный файл или перетащите его в уже открытое окно текстового редактора.
Совет
Вот трюк, который поможет вам быстро открывать файлы HTML. Найдите свой файл, затем щелкните его правой кнопкой мыши (на Mac нажмите, удерживая клавишу Control), и выберите «Открыть с помощью». Откроется список программ, которые можно использовать для открытия файла.Щелкните Блокнот (или TextEdit) в списке, чтобы открыть новое окно текстового редактора и открыть файл HTML одним махом.
Если вы оставите окно веб-браузера открытым во время редактирования HTML-файла в текстовом редакторе, браузер сохранит старую версию вашего файла. Чтобы увидеть последние изменения, снова сохраните текстовый файл (выберите «Файл» → «Сохранить»), а затем обновите страницу в браузере (обычно это так же просто, как щелкнуть страницу правой кнопкой мыши и выбрать «Обновить» или «Обновить»).
Просмотр HTML-кода действующей веб-страницы
Большинство текстовых редакторов не позволяют открывать веб-страницу в Интернете.Однако веб-браузеры – дают вам возможность заглянуть в необработанный HTML-код, который скрывается за любой веб-страницей.
Если вы используете Internet Explorer, Chrome, Firefox или любой другой браузер, кроме Safari, вы можете использовать ярлык. После перехода на веб-страницу, которую хотите изучить, щелкните правой кнопкой мыши в любом месте страницы и выберите «Просмотр исходного кода» или «Просмотр исходного кода страницы» (точная формулировка зависит от браузера). Появится новое окно, показывающее необработанный HTML-код, лежащий в основе страницы.
Если вы используете Safari на Mac, вам нужно перепрыгнуть через лишнюю петлю, чтобы увидеть HTML-код веб-страницы. Сначала включите меню «Разработка», выбрав Safari → «Настройки» → «Дополнительно», а затем установите флажок «Показать меню разработки в строке меню». Как только вы это сделаете, посетите страницу, которую хотите проанализировать, и выберите «Разработка» → «Показать источник страницы».
Подсказка
Firefox имеет удобную функцию, которая позволяет вам сосредоточиться на части HTML на сложной веб-странице. Просто выделите интересующий вас текст на самой странице, щелкните его правой кнопкой мыши и выберите «Просмотреть источник выделения».
Большинство веб-страниц значительно сложнее, чем пример popsicles.htm , показанный на рис. 1-1, поэтому вам нужно пройти через гораздо больше HTML-тегов, когда вы смотрите на разметку веб-страницы. Вы также, вероятно, найдете густую чащу кода JavaScript, набитого вверху страницы, лишенного всех интервалов и почти невозможного для чтения. Но даже если разметка выглядит чушью, не паникуйте. К тому времени, когда вы дочитаете эту книгу, вы сможете просмотреть груду HTML-кода, чтобы найти интересующие вас фрагменты.Фактически, профессиональные веб-разработчики часто используют технику просмотра исходного кода, чтобы проверить работу своих конкурентов.
Теперь, когда вы знаете, как просматривать существующие файлы HTML и создавать свои собственные, следующим шагом будет понимание того, что находится внутри среднего файла HTML. Все вращается вокруг одной концепции - тегов .
HTML-теги - это инструкции по форматированию, которые сообщают браузеру, как преобразовать обычный текст во что-то визуально привлекательное. Если бы вы удалили все теги из HTML-документа, полученная страница состояла бы только из простого неформатированного текста.
Тег можно узнать по угловым скобкам, двум специальным символам, которые выглядят следующим образом: <> . При создании тега вы вводите HTML-код между скобками. Этот код предназначен только для обозревателя; веб-посетители никогда его не видят (если только они не используют команду «Просмотр исходного кода» для просмотра HTML-кода). По сути, код - это инструкция, которая передает браузеру информацию о том, как отформатировать следующий текст.
Например, один простой тег - это тег , который означает «полужирный» (по соглашению имена тегов обычно пишутся в нижнем регистре).Когда браузер встречает этот тег, он включает полужирное форматирование, которое влияет на весь текст, следующий за тегом. Вот пример:
Этот текст не полужирный. Этот текст выделен жирным шрифтом.
Сам по себе тег недостаточно хорош; он известен как начальный тег , что означает, что он включает какой-либо эффект (в данном случае жирный шрифт). Вы соединяете большинство начальных тегов с совпадающим конечным тегом , который отключает от эффекта .
Конечный тег можно легко распознать. Они выглядят так же, как начальные теги, за исключением того, что начинаются с косой черты. Это означает, что они начинаются так: , а не как <. Таким образом, конечный тег для полужирного форматирования - . Вот пример:
Не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.
Какой браузер отображает как:
Это не жирный шрифт. Обратите внимание! Теперь мы вернулись к нормальной жизни.
Этот пример отражает еще один важный принцип браузеров: они всегда обрабатывают теги в том порядке, в котором вы размещаете их в своем HTML. Чтобы получить правильное форматирование полужирным шрифтом, вам необходимо убедиться, что вы правильно разместили теги и .
Как видите, у браузера довольно простая задача. Он сканирует HTML-документ, ищет теги и включает и выключает различные настройки форматирования. Он берет все остальное (все, что не является тегом) и отображает его в окне браузера.
Примечание
Добавление тегов к обычному тексту называется разметкой документа, а сами теги известны как разметка HTML . Когда вы смотрите на необработанный HTML, вам может быть интересно посмотреть на его содержимое (текст, заключенный между тегами) или разметку (сами теги).
Большинство тегов идут парами. Когда вы используете начальный тег (например, ), вы должны включить соответствующий конечный тег ( ). Эта комбинация начального и конечного тегов вместе с текстом между ними составляет элемент HTML .
Вот основная идея: пара тегов создает контейнер (см. Рис. 1-7). Вы размещаете контент (например, текст) внутри этого контейнера. Например, когда вы используете теги и , вы создаете контейнер, который применяет полужирное форматирование к тексту внутри контейнера. При создании веб-страниц вы будете использовать разные контейнеры для обертывания разных фрагментов текста. Если вы так думаете об элементах, вы никогда не забудете включить конечный тег.
Рисунок 1-7.Чтобы получить полужирный текст, вам нужно начать с правильного контейнера. Это элемент .
Примечание
Когда кто-то ссылается на элемент , он имеет в виду весь шебанг - начальный тег, конечный тег и содержимое между ними. Когда кто-то ссылается на тег , он обычно имеет в виду начальный тег, который запускает эффект.
Конечно, без исключения жизнь не была бы такой веселой (и компьютерные книги были бы не такими толстыми).Если подойти к делу, на самом деле существует двух типов элементов :
Контейнерные элементы , безусловно, являются наиболее распространенным типом элементов. Они применяют форматирование к содержимому, помещенному между начальным и конечным тегами.
Автономные элементы не включают и не выключают форматирование. Вместо этого они вставляют что-то, например изображение, на страницу. Одним из примеров является элемент –, который вставляет разрыв строки на веб-страницу.Автономные элементы не входят в пары, как элементы-контейнеры, и вы можете услышать, что они называются пустыми элементами , потому что вы не можете поместить в них какой-либо текст.
В этой книге все автономные элементы включают косую черту перед закрывающим > , что-то вроде открывающего и закрывающего тегов в одном лице. Таким образом, вы увидите разрыв строки, записанный как вместо . Эта форма, называемая синтаксисом пустых элементов , удобна, поскольку четко отличает элементы контейнера от автономных элементов.Так вы никогда не запутаетесь.
Примечание
В недалеком прошлом веб-разработчики были вынуждены использовать синтаксис пустых элементов, т. Е. Теги, заканчивающиеся косой чертой, потому что это была официальная часть (теперь замененного) языка XHTML. . Сегодня косая черта в конце не является обязательной, поэтому автономные элементы могут использовать тот же синтаксис, что и начальные теги (что означает, что вы можете использовать или , например, для вставки разрыва строки).
На рис. 1-8 показаны два типа элементов в перспективе.
Рисунок 1-8. Вверху: этот фрагмент HTML показывает как элемент контейнера, так и автономный элемент. Внизу: браузер показывает получившуюся веб-страницу.
В предыдущем примере вы применили простой элемент , чтобы получить форматирование жирным шрифтом. Вы помещаете текст между тегами и . Однако текст - не единственное, что можно поместить между начальным и конечным тегами. Вы также можете вложить один элемент внутрь другого. Фактически, вложенных элементов - обычная практика при создании веб-страниц.Он позволяет применять к тексту более подробные инструкции по стилю, объединяя все элементы форматирования в одном наборе инструкций. Вы также можете вкладывать элементы для создания более сложных компонентов страницы, таких как маркированные списки (см. Структурирование текста).
Чтобы увидеть вложение в действии, вам понадобится другой элемент для работы. В этом примере рассмотрим, что произойдет, если вы хотите выделить полужирным шрифтом и курсивом . HTML не содержит ни одного элемента для этой цели, поэтому вам нужно объединить знакомый элемент (чтобы выделить текст жирным шрифтом) с элементом (чтобы выделить его курсивом).Вот пример:
Это word выделено полужирным шрифтом и курсивом.
Когда браузер просматривает этот фрагмент HTML, он создает текст, который выглядит следующим образом:
Это слово имеет полужирное и курсивное форматирование.
Между прочим, не имеет значения, поменяете ли вы порядок тегов и . Следующий HTML дает точно такой же результат.
Это word выделено курсивом и полужирным шрифтом.
Однако вы всегда должны закрывать теги в порядке , обратном , в котором вы их открывали. Другими словами, если вы применяете курсивное форматирование, а затем полужирное форматирование, вы должны сначала отключить полужирное форматирование, а затем курсивное форматирование. Вот пример, который нарушает это правило:
Это слово выделено курсивом и полужирным шрифтом.
Браузеры обычно могут разобраться в этом и сделать хорошее предположение о том, чего вы действительно хотите, но это опасная привычка, которая возникает при написании более сложного HTML.
Как вы увидите в следующих главах, HTML дает вам гораздо больше способов вложения элементов. Например, вы можете вложить один элемент в другой, а затем вложить другой элемент в , и так далее до бесконечности.
Note
Если вы занимаетесь графическим дизайном, вам, вероятно, не терпится заполучить более мощные HTML-теги для изменения выравнивания, интервалов и шрифтов. К сожалению, в мире Интернета не всегда можно контролировать все, что угодно. В главе 2 приводится подробное описание, а в главе 3 представлено лучшее решение, которое называется таблиц стилей .
Общие сведения о документах HTML
До сих пор вы рассматривали фрагменты HTML - части полного документа HTML. Это дало вам представление о том, как работает HTML, но вам нужно улучшить свою игру, прежде чем вы сможете покорить Интернет. В этом разделе вы узнаете о структуре, которая отличает фрагмент HTML от официального документа HTML.
Определение типа документа
В первые дни Интернета веб-браузеры были изобилуют причудами.Когда люди создавали веб-страницы, им приходилось учитывать эти особенности. Например, браузеры могут вычислять поля вокруг плавающих блоков текста несколько разными способами, в результате чего страницы в одном браузере выглядят правильно, а в другом - странно.
Спустя годы правила HTML (и CSS, стандарта таблиц стилей, о котором вы узнаете в главе 3) были формализованы. Используя эти новые правила, каждый браузер может отображать одну и ту же страницу одинаково. Но это изменение вызвало серьезную головную боль для старых браузеров, таких как Internet Explorer, которые пережили темные века HTML.Он должен был каким-то образом поддерживать новые стандарты, сохраняя при этом возможность правильно отображать существующие веб-страницы, включая те, которые основывались на старых особенностях.
Интернет-сообщество остановилось на простом решении. При разработке новой современной веб-страницы вы указываете этот факт, добавляя код, называемый определением типа документа , (DTD) или doctype, , который идет в самом начале вашего HTML-документа (рис. 1-9).
Рисунок 1-9. Определение типа документа (DTD) - это первая часть информации в файле HTML.Он сообщает браузеру, какой стандарт разметки вы использовали для написания страницы.
Когда браузер обнаруживает doctype, он переключается в стандартный режим и отображает страницу наиболее согласованным и стандартизированным способом. В результате страница выглядит практически идентично во всех современных браузерах.
Но когда браузер встречает HTML-документ, у которого нет документа, все ставки отключены. Internet Explorer, например, переключается в ужасный режим quirks , где он пытается вести себя так же, как 10 лет назад, с причудами и всем остальным.Это гарантирует, что действительно старые веб-страницы сохранят вид, который они имели при первом создании, даже если они полагаются на старые ошибки браузера, которые уже давно исправлены. К сожалению, разные браузеры ведут себя по-разному, когда вы просматриваете страницу без документа. Скорее всего, у вас будут разные размеры текста, несогласованные поля и границы, а также неправильно расположенное содержание. По этой причине веб-страницы без доктайпов - плохая новость, и вам следует избегать их создания.
В прошлом веб-дизайнеры использовали разные типы документов для обозначения различных версий разметки HTML (например, XHTML, HTML5 или действительно старый HTML 4.01). Но сегодня веб-разработчики почти всегда используют простой универсальный документ HTML5:

Несмотря на то, что этот тип документа был формализован как часть HTML5, каждый браузер поддерживает его, даже старые версии IE, о которых никогда не слышали. HTML5. Это потому, что универсальный тип документа ничего не говорит о том, какую версию HTML вы предпочитаете. Вместо этого он просто указывает, что язык - это HTML. Этот однострочный документ просто отражает истинную философию HTML - поддерживать старые и новые документы.
Для сравнения, вот более многословный doctype для XHTML 1.0, который вы все еще можете встретить на старых веб-страницах:

Даже опытным веб-разработчикам приходилось копировать тип документа XHTML 1.0 с существующей веб-страницы, чтобы избежать неправильного ввода.
В этой книге во всех примерах используется doctype HTML5 не только потому, что это текущий стандарт, но и потому, что он подготавливает ваши страницы к будущему.Но то, что вы используете этот тип документа, не означает, что вы можете использовать все функции HTML5. Фактически, вам следует пока избегать большинства из них, если только вы не уверены, что они хорошо поддерживаются всеми браузерами, которые люди используют сегодня.
Примечание
В этой книге вы будете использовать только функции HTML5, которые работают во всех современных браузерах. Но если вам интересно узнать о более экспериментальных частях языка, которые по-прежнему не очень хорошо поддерживаются браузерами, ознакомьтесь с HTML5: отсутствующее руководство (O’Reilly).
Теперь вы готовы заполнить остальную часть веб-страницы.
Чтобы создать настоящий HTML-документ, вы начинаете с трех элементов контейнера: , и . Эти три элемента работают вместе, чтобы описать базовую структуру вашей страницы:

Этот элемент обертывает все (кроме документа) на вашей веб-странице.

Этот элемент обозначает часть заголовка вашего документа, которая включает некоторую информацию о вашей веб-странице.Первая деталь - это заголовок - откройте свою страницу в браузере, и этот заголовок отобразится как заголовок на вкладке. При желании раздел может также включать ссылки на таблицы стилей (о которых вы узнаете в главе 3) и файлы JavaScript (глава 14).

Этот элемент содержит основную часть вашей веб-страницы, включая фактическое содержимое, которое вы хотите показать миру.
Есть только один правильный способ использовать эти три элемента на странице.Вот их правильное расположение с типом документа HTML5 в начале страницы:
... ...
Каждая веб-страница использует эту базовую структуру. Эллипсы (…) показывают, куда вы вставляете дополнительную информацию. Пробелы между линиями не обязательны - они нужны только для того, чтобы вам было легче увидеть структуру элемента.
Когда у вас есть скелет HTML, вам нужно добавить в смесь еще два элемента контейнера.Для каждой веб-страницы требуется элемент </code>, который находится в разделе заголовка страницы, и вам необходимо создать контейнер для текста в разделе <code><body> </code> страницы. Один универсальный текстовый контейнер - это элемент <code><p> </code>, который представляет абзац.</p><p> Вот элементы, которые вам нужно добавить:</p><dl><dt> <code><title> </code></dt><dd><p> Этот элемент устанавливает заголовок для вашей веб-страницы. В названии играет несколько ролей.Сначала веб-браузеры отображают его на вкладке браузера или в верхней части окна браузера. Во-вторых, когда посетитель добавляет вашу страницу в закладки, браузер использует название в качестве метки закладки. В-третьих, когда ваша страница появляется в веб-поиске, поисковая система обычно отображает этот заголовок в качестве первой строки результатов, за которым следует фрагмент контента со страницы.</p></dd><dt> <code><p> </code></dt><dd><p> Обозначает абзац. Веб-браузеры не делают отступы между абзацами, но они добавляют небольшой промежуток между последовательными абзацами, чтобы они были разделены.</p></dd></dl><p> Вот веб-страница с этими двумя новыми ингредиентами (выделены жирным шрифтом):</p><pre> <! DOCTYPE html> <html> <head> <strong> <code> <title> Все, что я знаю о веб-дизайне

Если вы откроете этот документ в веб-браузере, вы обнаружите, что страница пуста, но отображается заголовок (как показано на рисунке 1-10). Рисунок 1-10.Когда браузер отображает веб-страницу, он показывает заголовок страницы на вкладке браузера или в верхней части окна. Но учтите: название не всегда подходит. В его нынешнем виде этот HTML-документ является хорошим шаблоном для будущих страниц. Базовая структура на месте; вам просто нужно изменить заголовок и добавить текст. Эту задачу вы возьмете за следующую. Учебное пособие: создание полного HTML-документа В этом руководстве вы научитесь составлять свою первую настоящую веб-страницу.Вы будете создавать онлайн-резюме (перейдите к «10 наиболее важным элементам» (и еще нескольким), чтобы увидеть окончательный результат), но подробности применимы к любой создаваемой вами странице. Подсказка Как и все руководства в этой книге, вы можете найти решение для этого упражнения на сопутствующем сайте http://prosetech.com/web. Просто загляните в папку с именем Tutorial-1-2 (сокращение от «Chapter 1, second tutorial»). По мере того, как вы создаете эту страницу, добавляя список, изображение и заголовки, она проходит несколько итераций.Учебные файлы включают отдельный файл для каждого этапа улучшения. Независимо от того, какую страницу вы хотите создать, вы всегда начинаете одинаково: Запустите текстовый редактор . Это Блокнот или TextEdit. Введите скелет HTML в новый файл . Это doctype, корневой элемент и два основных раздела каждой веб-страницы: и .Выглядит это так: Чтобы сэкономить время в будущем, сохраняйте эту страницу, а затем копируйте и вставляйте этот скелет HTML каждый раз при создании нового файла. Папка с учебником включает файл с именем skeleton.htm , который поможет вам в этом - он содержит doctype и три стандартных элемента HTML-страницы, но не содержит содержимого. Добавьте заголовок в раздел . Добавьте элемент </code> в новую строку между открывающим тегом <code><head> </code> и закрывающим тегом <code></head> </code>:</p><pre> <strong> <code> <title> Hire Me! Добавьте свой контент в раздел . Например, предположим, что вы хотите написать простую страницу резюме. Вот очень простой пример: Найми меня! Меня зовут Ли Пак.Нанять меня в свою компанию, потому что моя работа с легкостью . В этом примере выделены ( полужирным шрифтом, ) изменения, внесенные в базовый каркас HTML - измененный заголовок и одну строку текста. В этом примере используется единственный элемент внутри абзаца, просто чтобы немного украсить страницу. Сохраните HTML-файл как резюме .htm и откройте его в веб-браузере . Если ваша страница отображается правильно (см. Рис. 1-11), вы можете быть уверены, что у вас хорошее начало. Рисунок 1-11. Добро пожаловать в Интернет. На этой странице не так много полезных функций HTML (и Ли, вероятно, не получится нанять), но она представляет собой одну из самых простых HTML-страниц, которые вы можете создать. Используя приемы HTML, описанные в следующих разделах, вы можете опираться на этот пример и дать Ли лучшее резюме.Каждый раз, когда вы вносите изменения в документ в текстовом редакторе, обновляйте страницу в веб-браузере, чтобы проверить, все ли идет по пути. Когда вы начнете создавать более подробные веб-страницы, вы быстро обнаружите, что создание страницы не так просто, как, скажем, создание страницы в Microsoft Word. Например, вы можете улучшить страницу резюме, создав список навыков. Вот разумная первая попытка: Наймите меня! Меня зовут Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: * Быстрый набор текста (почти 12 слов в минуту). * Невероятная заточка карандашей. * Изобретательское оправдание. * Ведение переговоров с мировыми офицерами. Проблема возникает, когда вы открываете этот, казалось бы, невинный документ в своем веб-браузере (рис. 1-12). Рисунок 1-12. HTML игнорирует разрывы строк и последовательные пробелы, поэтому то, что выглядит как аккуратно организованный текст в вашем HTML-файле, может превратиться в беспорядочный текст, когда вы отображаете его в браузере. Проблема в том, что HTML игнорирует лишние пробелы. Сюда входят табуляции, разрывы строк и лишние пробелы (более одного последовательного пробела). В первый раз, когда это произойдет, вы, вероятно, ошеломленно уставитесь на свой экран и удивитесь, почему веб-браузеры устроены именно так. Но на самом деле это имеет смысл, если учесть, что HTML должен работать как универсальный стандарт . Допустим, вы настраиваете свою гипотетическую веб-страницу с идеальным интервалом, отступом и шириной линии для монитора вашего компьютера . Загвоздка в том, что эта страница может не так хорошо выглядеть на чужом мониторе. Например, часть текста может прокручиваться с правой стороны страницы, что затрудняет чтение. А разные мониторы - это только часть проблемы. Современные веб-страницы должны работать на различных типах устройств . Будущий босс Ли Пака может просмотреть резюме Ли на чем угодно, от новейшего широкоэкранного ноутбука до планшетного компьютера или смартфона. Чтобы иметь дело с этим диапазоном опций отображения, HTML использует элементы для определения структуры вашего документа. Вместо того, чтобы сообщать браузеру: «Здесь вы переходите к следующей строке, а здесь вы добавляете четыре дополнительных пробела», HTML сообщает браузеру: «Вот два абзаца и маркированный список». Браузер должен отображать страницу, используя инструкции, которые вы включаете в свой HTML. Чтобы исправить пример резюме, вам необходимо использовать больше элементов абзаца и два новых элемента контейнера: Указывает начало маркированного списка, называемого неупорядоченным списком на жаргоне HTML.Список - идеальный способ подробно описать навыки Ли. Обозначает отдельный элемент в маркированном списке. Ваш браузер делает отступ для каждого элемента списка, а для предложений, выходящих за пределы одной строки, правильно делает отступ для последующих строк, чтобы они совпадали с первой. Кроме того, перед каждым элементом ставится маркер (•). Вы можете использовать элемент списка только внутри элемента списка, например . Другими словами, каждый элемент списка ( ) должен находиться внутри элемента списка ( ). Вот исправленная веб-страница (показанная на рис. 1-13), где структурные элементы выделены жирным шрифтом: Наймите меня! Я Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Придумывание оправданий изобретательности. Ведение переговоров с мирными офицерами. Рисунок 1-13. При наличии правильных элементов (как показано в коде на этой странице) браузер понимает структуру вашего HTML-документа и знает, как его отображать. Вы можете использовать привычку браузера игнорировать перенос строки в свою пользу. Чтобы сделать ваши HTML-документы более удобочитаемыми, добавляйте разрывы строк и пробелы в любом месте. Веб-специалисты часто используют отступы, чтобы упростить понимание структуры вложенных элементов. В примере резюме вы можете увидеть этот стиль на практике. Обратите внимание, как элементы списка (строки, начинающиеся с элемента
) имеют отступ. Это не влияет на браузер, но упрощает просмотр структуры HTML-документа и оценку того, как браузер будет отображать его. Рисунок 1-14 анализирует HTML-документ с использованием модели дерева . Модель дерева - это удобный способ познакомиться с анатомией веб-страницы, поскольку она сразу показывает общую структуру страницы. Однако по мере того, как ваши веб-страницы станут более сложными, они, вероятно, станут слишком сложными для использования древовидной модели. Рисунок 1-14. Вот еще один способ взглянуть на созданный вами HTML-код. Модель дерева показывает, как вы вкладываете элементы HTML. Следуя стрелкам, вы увидите, что элемент верхнего уровня содержит элементы и .Внутри элемента находится элемент </code>, а внутри элемента <code><body> </code> находятся два абзаца и маркированный список с четырьмя элементами в нем. Если вы посмотрите на модель дерева достаточно долго, вы поймете, почему HTML называет все эти элементы «элементами контейнера».</p><p> Если вы мазохист, вам не нужно использовать пробелы. Предыдущий пример в точности эквивалентен следующему гораздо менее читаемому HTML-документу:</p><pre> <! DOCTYPE html> <html> <head> <title> Hire Me! я Ли Парк.Наймите меня для своей компании, потому что моя работа без шума . Мои навыки: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательность поиск оправданий. Ведение переговоров с мирными офицерами. Конечно, человеку практически невозможно написать такой HTML, не допустив ошибки. Где все картинки? Будь то биржевой график, логотип вашей подземной гаражной группы или подделанная фотография вашей любимой знаменитости, Интернет был бы довольно скучным без изображений. До сих пор вы видели, как поместить текст в документ HTML, но что происходит, когда вам нужно изображение? Хотя это может показаться удивительным, вы не можете сохранить изображение в файле HTML. Есть много веских причин, по которым вы все равно не захотите - ваши файлы веб-страниц станут действительно большими, будет сложно изменять ваши изображения или делать с ними что-то еще, и вам будет дьявольски весело редактировать свои страницы в текстовом редакторе, потому что данные изображения могут создать беспорядок.Решение состоит в том, чтобы сохранить ваши изображения в виде отдельных файлов, а затем связать с ними ваш HTML-документ. Таким образом, ваш браузер вытягивает изображения и размещает их именно там, где вы хотите, на своей странице. Инструмент связывания, который вставляет изображения, - это элемент (сокращение от «изображение»). Он указывает на файл изображения, который браузер извлекает и вставляет на страницу. Вы можете поместить файл изображения в ту же папку, что и ваша веб-страница (что является самым простым вариантом), или вы можете разместить его на совершенно другом веб-сайте. Хотя в главе 4 вы узнаете все, что когда-либо хотели знать о веб-графике, сейчас стоит рассмотреть простой пример. Чтобы попробовать это, вам понадобится готовое для Интернета изображение. (Наиболее часто поддерживаемые типы файлов изображений - это JPEG, GIF и PNG.) Если у вас нет изображения под рукой, вы можете загрузить образец изображения leepark.jpg из папки Tutorial-1-2. Вот пример элемента , который использует файл leepark.jpg : Как и обсуждавшийся ранее элемент , является отдельным элементом без содержимого. По этой причине имеет смысл использовать синтаксис пустого элемента. и добавьте косую черту перед закрывающей угловой скобкой. Однако есть очевидная разница между элементом и элементом . Хотя является отдельным элементом, это не т самодостаточный.Чтобы элемент имел какое-либо значение, вам необходимо предоставить еще две части информации: имя файла изображения и некоторый альтернативный текст, который используется в тех случаях, когда браузер не может загрузить или отобразить изображение (см. Альтернативный текст ). Чтобы включить эту дополнительную информацию в элемент изображения, HTML использует атрибуты , дополнительные части информации, которые появляются на после имени элемента, но перед закрывающим символом>. Пример включает два атрибута, разделенных пробелом.Каждый атрибут состоит из двух частей - имени (которое сообщает браузеру, что делает атрибут) и значения (части информации, которую вы предоставляете). Имя первого атрибута - src , что является сокращением от слова «источник»; он сообщает браузеру, где взять нужное изображение. В этом примере значение атрибута src равно leepark.jpg , что является именем файла с изображением Ли Парка. Имя второго атрибута - alt , что является сокращением от «альтернативного текста.Он сообщает браузеру, что вы хотите, чтобы он отображал текст, если он не может отображать изображение. Его значение - это текст, который вы хотите отобразить, в данном случае это «Lee Park Portrait». Как только вы разберетесь с элементом изображения, вы будете готовы использовать его в HTML-документе. Просто разместите его там, где это имеет смысл, внутри или после существующего абзаца: Наймите меня! Меня зовут Ли Пак. Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Мои навыки включают: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательные отговорки. Ведение переговоров с мирными офицерами. На рис. 1-15 показано, где именно заканчивается изображение. Рисунок 1-15.Вот веб-страница, на которой встроено изображение благодаря связывающей способности элемента изображения. Чтобы отобразить этот документ, веб-браузер выполняет отдельный запрос на получение файла изображения. В результате ваш браузер может отображать текст веб-страницы до того, как загрузит графику, в зависимости от того, сколько времени занимает загрузка (обычно это доли секунды). Note В главе 4 вы узнаете о многих других приемах веб-графики, в том числе о том, как изменять их размер и обтекать их текстом. 10 самых важных элементов (и еще несколько) Теперь вы достигли точки, когда вы можете создать базовый документ HTML, и у вас уже есть несколько элементов за плечами. Вы знаете основы - все, что вам осталось, - это расширить свои знания, научившись использовать больше элементов. HTML имеет относительно небольшой набор элементов. Скорее всего, вы будете использовать менее 25 на регулярной основе. Это ключевая часть успеха HTML, потому что он делает HTML простым языком общего доступа, понятным каждому. Примечание Вы не можете определять свои собственные элементы и использовать их в документе HTML, потому что веб-браузеры не знают, как их интерпретировать. Некоторые элементы, такие как элемент , форматирующий абзац, важны для определения общей структуры страницы. Они называются блочными элементами . Блочные элементы получают дополнительное пространство - когда вы добавляете один на страницу, браузер начинает новую строку (отделяя этот блочный элемент от предыдущей). Браузер также добавляет новую строку в конец блочного элемента, отделяя его от следующего элемента. Вы можете размещать блочные элементы непосредственно внутри раздела вашей веб-страницы или внутри другого блочного элемента. В Таблице 1-1 представлен краткий обзор некоторых из наиболее фундаментальных элементов блока, некоторые из которых вы уже видели. Он также указывает, какие из них являются элементами контейнера, а какие - автономными. (Как вы узнали из статьи «Понимание элементов», для элементов-контейнеров требуются начальный и конечный теги, но автономные элементы обходятся только одним тегом.) Вы более подробно изучите все эти элементы в главе 2. Таблица 1-1. Базовые блочные элементы. ЭЛЕМЕНТ НАИМЕНОВАНИЕ ТИП ЭЛЕМЕНТА ОПИСАНИЕ 00 9273 9226 Контейнер Как, вероятно, вам сказал учитель английского языка в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка. , , , , , Заголовок Контейнер Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими полужирными буквами. Чем меньше число, тем крупнее текст, поэтому дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, а , хотя и полужирный, на самом деле меньше обычного текста. Горизонтальная линия (или горизонтальная линия на языке HTML) Автономный Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.) , Неупорядоченный список, элемент списка Контейнер Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»). Другие элементы предназначены для работы с более мелкими структурными деталями - например, фрагменты текста, выделенного жирным или курсивом, разрывы строк, ссылки, ведущие на другие веб-страницы, и изображения. Эти элементы называются встроенными элементами . Вы можете поместить встроенный элемент в блочный элемент, но никогда не должны помещать блочный элемент внутри встроенного элемента.В таблице 1-2 перечислены наиболее полезные встроенные элементы. Таблица 1-2. Базовые строчные элементы. 9 0 94 7 7 9 4 900 Полужирный и курсив ЭЛЕМЕНТ НАИМЕНОВАНИЕ ТИП ОПИСАНИЕ Контейнер Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.) разрыв строки Автономный Иногда все, что вам нужно, это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца. Изображение Автономный Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут src , чтобы указать имя файла изображения, которое вы хотите показать в браузере. Якорь Контейнер Элемент якоря является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6. Чтобы образец резюме выглядел более респектабельно, вы можете использовать несколько ингредиентов из таблиц 1-1 и 1-2. На рис. 1-16 показана измененная версия веб-страницы, в которую добавлены некоторые новые элементы. Рисунок 1-16. Этот HTML-документ, содержащий больше заголовков, списков и горизонтальную линию, добавляет немного больше стиля резюме. Вот обновленный HTML с новыми заголовками и горизонтальной линией, выделенными жирным шрифтом: Наймите меня! Наймите меня! Меня зовут Ли Пак.Наймите меня в свою компанию, потому что моя работа вне пределов шепот . Как доказательство моих потрясающих компьютерных навыков и монументальной работы этика, пожалуйста, оцените это электронное резюме. Незаменимые навыки Мои навыки включают: Быстрый набор текста (почти 12 слов в минуту). Невероятная заточка карандашей. Изобретательные отговорки. Ведение переговоров с мирными офицерами. А еще я знаю HTML! Предыдущий опыт работы У меня долгая и блестящая карьера в различных профессиях. Вот некоторые основные моменты: 2008-2009 - работал машинисткой в Flying Fingers 2010-2013 - Выполнение передовых веб-дизайнеров в Riverdale Ферма 2014–2015 гг. - отмечен в главе 1 книги Создание веб-сайта: The Отсутствует руководство Не беспокойтесь, если в этом примере слишком много разметки, чтобы вы могли сразу ее усвоить.В следующей главе вы получите больше практики по превращению обычного текста в структурированный HTML. Проверка страниц на наличие ошибок Даже веб-дизайнер с лучшими намерениями может написать плохую разметку и нарушить правила HTML. Хотя браузеры действительно должны отлавливать эти ошибки, практически ни одна из них не справляется. Вместо этого они изо всех сил стараются игнорировать ошибки и отображать некорректные документы. На первый взгляд это кажется отличным дизайном - в конце концов, он сглаживает любые незначительные промахи, которые вы могли сделать.Но у терпимости к ошибкам есть и обратная сторона. В частности, такое поведение упрощает то, что серьезные ошибки остаются незамеченными на ваших веб-страницах. Что за серьезная ошибка? Проблема, которая безвредна, когда вы просматриваете страницу в своем любимом браузере, но вызывает смущение, когда кто-то просматривает страницу в другом браузере; ошибка, которая остается незамеченной до тех пор, пока вы не отредактируете код, что непреднамеренно обнаруживает проблему в следующий раз, когда ваш браузер отображает страницу; или ошибка, которая не влияет на отображение страницы, но не позволяет автоматическому инструменту (например, поисковой системе) прочитать страницу. К счастью, есть способ решить подобные проблемы. Вы можете использовать инструмент проверки , который читает вашу веб-страницу и проверяет ее разметку. Если вы используете профессиональный инструмент веб-дизайна, такой как Dreamweaver, вы можете использовать его встроенное средство проверки ошибок (подробности описаны в главе 5). Если вы создаете страницы вручную в текстовом редакторе, вы можете использовать бесплатный инструмент онлайн-проверки (см. Ниже). Вот некоторые потенциальные проблемы, которые может обнаружить валидатор: Отсутствуют обязательные элементы (например, элемент).</p></li><li><p> Начальный тег контейнера без соответствующего конечного тега.</p></li><li><p> Неправильно вложенные теги.</p></li><li><p> Теги с отсутствующими атрибутами (например, элемент <code> <img> </code> без атрибута <code> src </code>).</p></li><li><p> Элементы или контент в неправильном месте (например, текст, помещенный непосредственно в раздел <code><head> </code>).</p></li></ul><p> В Интернете можно найти множество инструментов для проверки.Следующие шаги показывают, как использовать популярный валидатор, предоставленный организацией по стандартизации W3C (официальные владельцы языка HTML). Попробуйте это с помощью файла <em> resume.htm </em>, который вы создали во втором учебнике (Учебник: Создание полного HTML-документа). Или дайте валидатору повод для жалоб с помощью файла <em> popsicles.htm </em>, который вы создали в первом учебнике (Учебник: Создание файла HTML). Поскольку это фрагмент HTML, а не полный документ HTML, валидатор быстро пожалуется на недостающие биты, такие как требуемые элементы <code><html> </code>, <code><head> </code> и <code><body> </code>.</p><p> После того, как вы решите, что вы хотите проверить, выполните следующие действия:</p><ol type="1"><li><p> <strong> Убедитесь, что ваш документ имеет тип документа </strong> (Общие сведения о документах HTML).</p><p> Тип документа сообщает валидатору, какие правила использовать при проверке вашего документа. В этой книге мы придерживаемся универсального документа HTML5 («Базовый скелет»).</p></li><li><p> <strong> В веб-браузере перейдите по адресу </strong> http://validator.w3.org (рис. 1-17).</p><p> Валидатор W3C предоставляет вам три варианта, представленные тремя вкладками: Проверить по URI (для страницы, которая уже находится в сети), Подтвердить по загрузке файла (для страницы, которая хранится на вашем компьютере) и Проверить с помощью прямого ввода (для разметки). вы вводите прямо в предоставленное поле).</p> Рисунок 1-17. На веб-сайте http://validator.w3.org есть три варианта проверки HTML. Вы можете ввести адрес страницы в Интернете, вы можете загрузить собственный файл (показанный здесь) или ввести разметку напрямую.</li><li><p> <strong> Щелкните нужную вкладку и введите свой HTML-контент </strong>.</p><p> <strong> Проверить по URI </strong> позволяет проверить существующую веб-страницу. Просто введите URL-адрес (это полный Интернет-адрес) страницы в поле Адрес (например, www.MySloppySite.com/FlawedPage.html).</p><p> <strong> Подтвердить загрузкой файла </strong> позволяет загружать любой файл с вашего компьютера. Сначала нажмите кнопку «Обзор» (которая называется «Выбрать файл в Chrome»), чтобы увидеть стандартное диалоговое окно «Открыть». Перейдите к местоположению вашего HTML-файла, выберите его и нажмите «Открыть». Это самый простой способ убедиться, что вы все правильно поняли со страницей <em> resume.htm </em>, которую вы создали ранее.</p><p> <strong> Подтверждение прямым вводом </strong> позволяет проверить любую разметку - вам просто нужно ввести ее в предоставленное большое поле.Самый простой способ использовать эту опцию - скопировать разметку из текстового редактора и вставить ее в поле.</p><p> Прежде чем продолжить, вы можете щелкнуть Дополнительные параметры в любом из окон с вкладками, чтобы установить другие параметры, но вы, вероятно, не сделаете этого. Лучше всего позволить валидатору автоматически определять тип документа; Таким образом, валидатор будет использовать тип документа, указанный на вашей веб-странице. Точно так же оставьте для параметра «Кодировка символов» значение «обнаруживать автоматически», если вы не написали свою страницу не на английском языке, и у валидатора возникли проблемы с определением правильного набора символов.</p></li><li><p> <strong> Щелкните кнопку Проверить </strong>.</p><p> После небольшой задержки валидатор сообщает, прошел ли ваш документ проверку валидации или, в случае неудачи, какие ошибки обнаружил валидатор (см. Рисунок 1-18).</p><p> Валидатор также может предложить несколько безобидных предупреждений для совершенно допустимого HTML-документа, включая предупреждение о том, что кодировка символов была определена автоматически, и предупреждение о том, что служба проверки HTML5 считается экспериментальной, незаконченной функцией.</p></li></ol><p> Рисунок 1-18. В этом файле валидатор обнаружил 10 ошибок, вызванных двумя ошибками. Во-первых, на странице отсутствует обязательный элемент <code><title> </code>. Во-вторых, он закрывает элемент <code><li> </code> перед закрытием элемента <code> <b> </code>, вложенного внутрь.<div class='yarpp-related yarpp-related-none'><p>No related posts.</p></div></div></div><div class="post-sharrre group"><div id="twitter" data-url="https://ylianova.ru/html/nachalo-html-koda-struktura-koda-htmlbook-ru.html" data-text="Начало html кода: Структура кода | htmlbook.ru" data-title="Tweet"></div><div id="facebook" data-url="https://ylianova.ru/html/nachalo-html-koda-struktura-koda-htmlbook-ru.html" data-text="Начало html кода: Структура кода | htmlbook.ru" data-title="Like"></div><div id="googleplus" data-url="https://ylianova.ru/html/nachalo-html-koda-struktura-koda-htmlbook-ru.html" data-text="Начало html кода: Структура кода | htmlbook.ru" data-title="+1"></div><div id="pinterest" data-url="https://ylianova.ru/html/nachalo-html-koda-struktura-koda-htmlbook-ru.html" data-text="Начало html кода: Структура кода | htmlbook.ru" data-title="Pin It"></div></div></div></article><ul class="post-nav group"><li class="next"><a href="https://ylianova.ru/css/css-svechenie-teksta-ten-i-effekt-svecheniya-cherez-css-dlya-teksta-i-blokov.html" rel="next"><i class="fa fa-chevron-right"></i><strong>Вперед</strong> <span>Css свечение текста – Тень и эффект свечения через CSS для текста и блоков</span></a></li><li class="previous"><a href="https://ylianova.ru/raznoe-2/programma-dlya-testirovaniya-kompyutera-na-neispravnost-zheleza-programma-dlya-diagnostiki-kompyutera-na-neispravnosti.html" rel="prev"><i class="fa fa-chevron-left"></i><strong>Назад</strong> <span>Программа для тестирования компьютера на неисправность железа – Программа для диагностики компьютера на неисправности</span></a></li></ul><section id="comments" class="themeform"><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/nachalo-html-koda-struktura-koda-htmlbook-ru.html#respond" style="display:none;">Отменить ответ</a></small></h3><form action="https://ylianova.ru/wp-comments-post.php" method="post" id="commentform" class="comment-form"><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="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="required" /></p><p class="comment-form-email"><label for="email">Email <span class="required">*</span></label> <input id="email" name="email" type="text" value="" size="30" maxlength="100" aria-describedby="email-notes" autocomplete="email" required="required" /></p><p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="text" 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='7486' id='comment_post_ID' /> <input type='hidden' name='comment_parent' id='comment_parent' value='0' /></p></form></div></section></div></section><div class="sidebar s1"> <a class="sidebar-toggle" title="Развернуть боковую панель"><i class="fa icon-sidebar-toggle"></i></a><div class="sidebar-content"><div id="search-2" class="widget widget_search"><form method="get" class="searchform themeform" action="https://ylianova.ru/"><div> <input type="text" class="search" name="s" onblur="if(this.value=='')this.value='Введите поисковую фразу';" onfocus="if(this.value=='Введите поисковую фразу')this.value='';" value="Введите поисковую фразу" /></div></form></div><div id="nav_menu-2" class="widget widget_nav_menu"><h3>Рубрики</h3><div class="menu-2-container"><ul id="menu-2" class="menu"><li id="menu-item-5370" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5370"><a href="https://ylianova.ru/category/css">Css</a></li><li id="menu-item-5371" class="menu-item menu-item-type-taxonomy menu-item-object-category current-post-ancestor current-menu-parent current-post-parent menu-item-5371"><a href="https://ylianova.ru/category/html">Html</a></li><li id="menu-item-5372" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5372"><a href="https://ylianova.ru/category/http">Http</a></li><li id="menu-item-5373" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5373"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li id="menu-item-5374" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5374"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li id="menu-item-5375" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5375"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li id="menu-item-5376" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5376"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li id="menu-item-5377" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5377"><a href="https://ylianova.ru/category/maket">Макет</a></li><li id="menu-item-5378" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5378"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li id="menu-item-5380" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5380"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li id="menu-item-5381" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5381"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li id="menu-item-5382" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5382"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li id="menu-item-5379" class="menu-item menu-item-type-taxonomy menu-item-object-category menu-item-5379"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li></ul></div></div><div id="categories-3" class="widget widget_categories"><h3>Рубрики</h3><ul><li class="cat-item cat-item-5"><a href="https://ylianova.ru/category/css">Css</a></li><li class="cat-item cat-item-4"><a href="https://ylianova.ru/category/html">Html</a></li><li class="cat-item cat-item-9"><a href="https://ylianova.ru/category/http">Http</a></li><li class="cat-item cat-item-10"><a href="https://ylianova.ru/category/javascript">Javascript</a></li><li class="cat-item cat-item-20"><a href="https://ylianova.ru/category/linux">Linux</a></li><li class="cat-item cat-item-11"><a href="https://ylianova.ru/category/photoshop">Photoshop</a></li><li class="cat-item cat-item-19"><a href="https://ylianova.ru/category/adaptiv">Адаптив</a></li><li class="cat-item cat-item-17"><a href="https://ylianova.ru/category/verstka">Верстка</a></li><li class="cat-item cat-item-3"><a href="https://ylianova.ru/category/raznoe">Вопросы и ответы</a></li><li class="cat-item cat-item-16"><a href="https://ylianova.ru/category/maket">Макет</a></li><li class="cat-item cat-item-6"><a href="https://ylianova.ru/category/sajt">Развитие сайтов</a></li><li class="cat-item cat-item-13"><a href="https://ylianova.ru/category/raznoe-2">Разное</a></li><li class="cat-item cat-item-12"><a href="https://ylianova.ru/category/sajt-2">Сайт</a></li><li class="cat-item cat-item-1"><a href="https://ylianova.ru/category/sovety">Советы</a></li><li class="cat-item cat-item-15"><a href="https://ylianova.ru/category/shablon-2">Шаблон</a></li><li class="cat-item cat-item-7"><a href="https://ylianova.ru/category/shablon">Шаблоны</a></li><li class="cat-item cat-item-14"><a href="https://ylianova.ru/category/shrift-2">Шрифт</a></li><li class="cat-item cat-item-8"><a href="https://ylianova.ru/category/shrift">Шрифты</a></li></ul></div></div></div></div></div><footer id="footer"><section id="footer-bottom"><div class="container"> <a id="back-to-top" href="#"><i class="fa fa-angle-up"></i></a><div class="pad group"><div class="grid one-half"><div id="copyright"><p>Блог сумасшедшего сисадмина © 2024. Все права защищены.</p></div><div id="credit"><p><a href="/sitemap.xml" class="c_sitemap">Карта сайта</a></p></div></div><div class="grid one-half last"></div></div></div></section></footer></div> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://ylianova.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script>   <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> </body></html>

Выходной атрибутOutput attribute	ОписаниеDescription
data-absolute-enableddata-absolute-enabled	Указывает, поддерживаются ли в тексте элементы с абсолютным положением.Indicates whether the body supports absolute positioned elements. В выходном HTML-коде всегда задано значение true.Always true in output HTML.
stylestyle	Свойства font-family и font-size основного текста.The font-family and font-size properties of the body.

Входной атрибутInput attribute	ОписаниеDescription
data-iddata-id	Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content.
data-render-fallbackdata-render-fallback	Резервное действие в случае ошибки извлечения: render (по умолчанию) или noneThe fallback action if the extraction fails: render (default) or none
data-render-methoddata-render-method	Выполняемый метод извлечения, напримерThe extraction method to perform, for example: `extract. businesscard` или `extract.recipeextract.businesscard` or `extract.recipe`
data-render-srcdata-render-src	Источник контента для извлечения.The content source for the extraction.
stylestyle	Свойства положения, размера, шрифта и цвета для элемента div:The position, size, font, and color properties for the div: position (только значение absolute), left, top и width (высота элементов Div настраивается автоматически).position (absolute only), left, top, and width (height is auto-configured for divs) Используется для создания элемента div с абсолютным положением, только если он является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`.Used to create an absolute positioned div, only if the div is a direct child of the body when the body sets `data-absolute-enabled="true"`. Пример: `<div ... />`Example: `<div ... />` Свойства CSS style элемента. В выходных данных HTML эти значения возвращаются встроенными в соответствующие дочерние элементы.The CSS style properties of the element. In the output HTML, these values are returned inline on appropriate child elements.

Входной атрибутInput attribute	ОписаниеDescription
altalt	Предоставленный замещающий текст для изображения.The supplied alt text for the image.
data-iddata-id	Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content.
data-render-srcdata-render-src	Должно было задано значение data-render-src или src.Either data-render-src or src is required. Веб-страница, которая будет отображаться в виде битового изображения на странице OneNote:The webpage to render as a bit-mapped image on the OneNote page: — `data-render-src="https://. .."` для общедоступного URL-адреса.- `data-render-src="https://..."` for a public URL. — `data-render-src="name:BlockName"` для части изображения в блоке Presentation составного запроса.- `data-render-src="name:BlockName"` for an image part in the «Presentation» block of a multipart request. Этот метод удобно использовать, если веб-страница слишком сложна для достоверного отображения в OneNote или для использования страницы необходимы учетные данные.This method is useful when the webpage is more complex than the OneNote page can faithfully render, or when the page requires login credentials.
data-tagdata-tag	Тег заметки для элемента.A note tag on the element.
stylestyle	Свойства положения и размера изображения: position (только absolute), left, top, width и height.The position and size properties for the image: position (absolute only), left, top, width, and height. Размер можно задать для любого изображения.Size can be set on any image. Свойства положения используются для создания изображения с абсолютным положением, только если изображение является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`.Position properties are used to create an absolute positioned image, only if the image is a direct child of the body when the body sets `data-absolute-enabled="true"`. Пример: `<img ... />`Example: `<img ... />` В выходном HTML-коде размеры изображения возвращаются по отдельности через атрибуты width и height.In the output HTML, the image size is returned separately in width and height attributes.
srcsrc	Должно было задано значение src или data-render-src.Either src or data-render-src is required. Изображение, отображаемое на странице OneNote:The image to render on the OneNote page: — `src="https://..."`: URL-адрес общедоступного изображения в Интернете.- `src="https://..."` for a URL to a publicly available image on the Internet. — `src="name:BlockName"`: именованная часть составного запроса, представляющая изображение.- `src="name:BlockName"` for a named part in a multipart request that represents the image.
width, heightwidth, height	Ширина и высота изображения в пикселях, но без обозначения px.The width or height of the image, in pixels but without the px. Пример: `width="400"`Example: `width="400"`

Входной атрибутInput attribute	ОписаниеDescription
data-original-srcdata-original-src	Обязательный.Required. URL-адрес источника видео.The URL of the video source. См. список поддерживаемых источников видео.See the list of supported video sources. Пример: `data-original-src="https://www.youtube. com/watch?v=3Ztr44aKmQ8"`Example: `data-original-src="https://www.youtube.com/watch?v=3Ztr44aKmQ8"`
width, heightwidth, height	Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: `width=300`Example: `width=300`

Выходной атрибутOutput attribute	ОписаниеDescription
data-original-srcdata-original-src	URL-адрес источника видео.The URL of the video source.
srcsrc	Ссылка на видео, внедренное в страницу OneNote.A link to the video that is embedded in the OneNote page.
width, heightwidth, height	Ширина или высота элемента iframe в пикселях.The width or height of the iframe, in pixels. Пример: `width=300`Example: `width=300`

Входной атрибутInput attribute	ОписаниеDescription
datadata	Обязательный.Required. Имя части, которая представляет файл в составном запросе.The name of the part that represents the file in the multipart request.
data-attachmentdata-attachment	Обязательный параметр. Имя файла.Required. The file name.
data-iddata-id	Ссылка на элемент.A reference for the element. Используется для обновления содержимого страницы.Used to update page content.
stylestyle	Свойства положения и размера объекта: position (только absolute), left, top и width.The position and size properties for the object: position (absolute only), left, top, and width. Используется для создания объекта с абсолютным положением, только если объект является непосредственным дочерним элементом основного текста, для которого задан атрибут `data-absolute-enabled="true"`.Used to create an absolute positioned object, only if the object is a direct child of the body when the body sets `data-absolute-enabled="true"`. Пример: `<object ... />`Example: `<object ... />`
typetype	Обязательный.Required. Стандартный тип файла мультимедиа.The standard media file type. Для файлов известных типов на странице OneNote отображается значок, связанный с типом файла.Known file types display the icon associated with the file type on the OneNote page. Для файлов неизвестных типов отображается универсальный значок файла.Unknown file types display a generic file icon.

Упорядоченный списокOrdered list	Неупорядоченный списокUnordered list
nonenone	nonenone

decimal (по умолчанию)decimal (default)
disc (по умолчанию)disc (default)

lower-alphalower-alpha
circlecircle

lower-romanlower-roman

СвойствоProperty	ПримерExample
background-colorbackground-color	`style="background-color:#66cc66"` (по умолчанию задан белый цвет)`style="background-color:#66cc66"` (defaults to white) Поддерживаются как шестнадцатеричный формат, так и именованные цвета.Both hexadecimal format and named colors are supported.
colorcolor	`style="color:#ffffff"` (по умолчанию задан черный цвет)`style="color:#ffffff"` (defaults to black)
font-familyfont-family	`style="font-family:Courier"` (по умолчанию задан шрифт Calibri)`style="font-family:Courier"` (defaults to Calibri)
font-sizefont-size	`style="font-size:10pt"` (по умолчанию задан размер 11 точек)`style="font-size:10pt"` (defaults to 11pt) API принимают размер шрифта в единицах pt или px, но единицы px преобразуются в pt. The APIs accept font size in pt or px, but converts px to pt. Десятичные значения округляются до ближайшего значения n,0 или n,5 точек.Decimal values are rounded to the nearest n.0pt or n.5pt.
font-stylefont-style	`style="font-style:italic"` (обычный или только курсив)`style="font-style:italic"` (normal or italic only)
font-weightfont-weight	`style="font-weight:bold"` (обычный или только полужирный)`style="font-weight:bold"` (normal or bold only)
strike-throughstrike-through	`style="text-decoration:line-through"`
text-aligntext-align	`style="text-align:center"` (только для блочных элементов)`style="text-align:center"` (for block elements only)
text-decorationtext-decoration	`style="text-decoration:underline"` (без оформления или только подчеркивание)`style="text-decoration:underline"` (none or underline only)

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП ЭЛЕМЕНТА	ОПИСАНИЕ 00	9273 9226	Контейнер	Как, вероятно, вам сказал учитель английского языка в средней школе, абзац является основной единицей для организации текста.Когда вы используете более одного элемента абзаца в строке, браузер вставляет пробел между двумя абзацами - чуть больше, чем полная пустая строка.
, , , , ,	Заголовок	Контейнер	Элементы заголовка - хороший способ структурировать вашу страницу и выделить заголовки.Они отображают текст большими полужирными буквами. Чем меньше число, тем крупнее текст, поэтому дает самый большой заголовок. К тому времени, когда вы дойдете до , заголовок уменьшится до того же размера, что и обычный текст, а , хотя и полужирный, на самом деле меньше обычного текста.
	Горизонтальная линия (или горизонтальная линия на языке HTML)	Автономный	Горизонтальная линия может помочь вам отделить один раздел вашей веб-страницы от другого .Линия автоматически соответствует ширине окна браузера. (Или, если вы поместите строку внутри другого элемента, например ячейки в таблице, она займет ширину своего контейнера.)
,	Неупорядоченный список, элемент списка	Контейнер	Эти элементы позволяют создавать базовые маркированные списки. Браузер автоматически помещает отдельные элементы списка в отдельные строки и делает отступ для каждого из них.Для быстрого изменения темпа вы можете заменить на , чтобы получить автоматически пронумерованный список вместо маркированного списка (ol означает «упорядоченный список»).

ЭЛЕМЕНТ	НАИМЕНОВАНИЕ	ТИП	ОПИСАНИЕ	Контейнер	Эти два элемента применяют стиль символов - жирный или курсивный текст.(Технически означает «текст другим голосом», а означает «стилистически смещенный текст», и есть способы изменить применяемое форматирование, как вы увидите в главе 3. Но в реальном мире почти все веб-разработчики ожидают, что означает курсив, а означает жирный шрифт.)
	разрыв строки	Автономный	Иногда все, что вам нужно, это текст, разделенный простыми переносами строки, а не отдельными абзацами.Благодаря этому последующие строки текста будут ближе друг к другу, чем при использовании абзаца.
	Изображение	Автономный	Для отображения изображения внутри веб-страницы используйте этот элемент. Убедитесь, что вы указали атрибут `src` , чтобы указать имя файла изображения, которое вы хотите показать в браузере.
	Якорь	Контейнер	Элемент якоря является отправной точкой для создания гиперссылок, позволяющих посетителям веб-сайта переходить с одной страницы на другую.Вы узнаете об этом незаменимом элементе в главе 6.