Структура html кода: Структура HTML-кода | Уроки | WebReference

Структура HTML-кода | Уроки | WebReference

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

Пример 1. Исходный код веб-страницы

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Пример веб-страницы</title>
 </head>
 <body>
  <h2>Заголовок</h2>
  <!-- Комментарий -->
  <p>Первый абзац.</p>
  <p>Второй абзац.</p>
 </body>
</html>

Скопируйте содержимое данного примера и сохраните его в папке c:\www\ под именем example2.html. После этого запустите браузер и откройте файл через пункт меню Файл > Открыть файл (Ctrl+O). В диалоговом окне выбора документа укажите файл example2.html. В браузере откроется веб-страница, показанная на рис. 1.

Рис. 1. Результат примера в браузере

Далее разберём отдельные строки нашего кода.

<!DOCTYPE html>

Элемент <!DOCTYPE> (жарг. доктайп) предназначен для указания типа текущего документа — DTD (document type definition, описание типа документа). Это необходимо, чтобы браузер понимал, как следует интерпретировать текущую веб-страницу, ведь HTML существует в нескольких версиях — современный HTML5 или устаревшие HTML4 и XHTML. Чтобы браузер «не путался» и понимал, согласно какому стандарту отображать веб-страницу и необходимо в первой строке кода задавать <!DOCTYPE>.

Поскольку мы в дальнейшем будем работать только с HTML5, то нам потребуется только один короткий и современный доктайп.

Мы упоминали, что имена элементов можно писать маленькими и большими буквами. К <!DOCTYPE> это правило тоже относится и его можно записывать по разному. Тем не менее, традиционно имя этого элемента пишется в верхнем регистре.

<html>

Открывающий тег <html> определяет начало HTML-документа, внутри него хранится «голова» (<head>) и «тело» документа (<body>).

<head>

Содержимое этого раздела не показывается напрямую на странице, за исключением элемента <title>. Внутри <head> могут располагаться следующие элементы: <base>, <link>, <meta>, <script>, <style> или <title>.

<meta charset="utf-8">

Элемент <meta> является универсальным и добавляет целый класс возможностей, в частности, с помощью метатега, как обобщённо называют этот элемент, можно изменить кодировку страницы, добавить ключевые слова, описание документа и многое другое, предназначенное для браузера или поисковых систем. В частности, чтобы браузер понимал, что имеет дело с кодировкой UTF-8 (Unicode transformation format, формат преобразования Юникод) и добавляется данная строка.

<title>Пример веб-страницы</title>

Элемент <title> определяет название веб-страницы. В браузере оно отображается на текущей вкладке (рис. 2).

Рис. 2. Название веб-страниц в браузере

Элемент <title> является обязательным и должен непременно присутствовать в коде документа. Внутри разрешается писать только текст и никаких других элементов в <title> быть не должно. Но допустимо добавлять разные текстовые символы, например, так: <title>Adobe™ Photoshop®</title>.

</head>

Закрывающий тег </head> показывает, что «голова» документа завершена.

<body>

«Тело» документа <body> предназначено для размещения элементов и содержимого веб-страницы.

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

HTML предлагает шесть текстовых заголовков разного уровня, которые показывают относительную важность раздела, расположенного после заголовка. Так, элемент <h2> представляет собой наиболее важный заголовок первого уровня, а элемент <h6> служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Элементы <h2>…<h6> относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него браузер добавляет пустое пространство.

<!-- Комментарий -->

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

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

<p>Первый абзац.</p>

Элемент <p> определяет абзац текста.

<p>Второй абзац.</p>

Элемент <p> является блочным, поэтому текст всегда начинается с новой строки, абзацы идущие друг за другом разделяются между собой отбивкой (так называется пустое пространство между ними). Это хорошо видно на рис. 1.

</body>

Следует добавить закрывающий тег </body>, чтобы показать, что «тело» документа завершено.

</html>

Последним элементом в коде всегда идёт закрывающий тег </html>.

Перейти к заданиям

Автор: Влад Мержевич

Последнее изменение: 10.01.2019

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

  • Назад
  • Обзор: Introduction to HTML
  • Далее

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

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

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

Заголовок (колонтитул)

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

Навигационное меню

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

Основное содержимое

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

Боковая панель

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

Нижний колонтитул (футер)

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

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

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

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

Примечание: Люди с дальтонизмом составляют около 8% мирового населения. Слепые и слабовидящие люди составляют примерно 4-5% населения мира (в 2012 году в мире было 285 миллионов таких людей, а общая численность населения составляла около 7 миллиардов).

В своём 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">
    <!-- следующие 3 строки нужны для корректного отображения семантических элементов HTML5 в старых версиях Internet Explorer-->
    <!--[if lt IE 9]>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script>
    <![endif]-->
  </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. В большом, сложном веб-сайте на планирование может уходить много времени, однако спроектировать простой веб-сайт из нескольких страниц может быть очень легко и весело!

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

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

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

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

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

  • Using HTML sections and outlines (en-US): Продвинутый справочник по семантическим элементам и алгоритму выделения разделов (outline algorithm) в HTML5.
  • Назад
  • Обзор: Introduction to HTML
  • Далее
  • Начало работы с HTML
  • Что такое заголовок? Метаданные в HTML
  • Основы редактирования текста в HTML
  • Создание гиперссылок
  • Углублённое форматирование текста
  • Структура документа и веб-сайта
  • Отладка HTML
  • Разметка письма
  • Структурируем страницу

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

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

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

Просмотреть расшифровку

2.6

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

51

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

92,5

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

121.9

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

142.2

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

161,9

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

178.1

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

206,3

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

225.1

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

230.9

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

242,5

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

290.1 ​​

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

303.7

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

310

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

346.1

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

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

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

 

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


<тело>

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

Это абзац.

Любая информация в тегах скрыта и используется браузерами и поисковыми роботами; это известно как метаданные. Также обратите внимание, что некоторые теги вложены в другие теги; в приведенном ниже примере </code> вложен внутри <code><head> </code> и <code><head> </code> вложен внутри <code><html> </code> . На изображении ниже показано, как элементы могут существовать внутри других элементов:</p></p></p><p> В таблице ниже описаны теги, которые использовались в приведенной выше базовой структуре HTML:</p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td> <!DOCTYPE></td><td> Это объявление для отображения типа документа; это помогает веб-браузеру правильно отображать веб-страницу</td></tr><tr><td> <название> </название></td><td> Определяет заголовок веб-страницы, который будет отображаться на вкладке веб-браузера</td></tr><tr><td><html></html></td><td> Показывает начало и конец файла HTML</td></tr><tr><td> <голова> </голова></td><td> Это дает информацию о файле (метаданные)</td></tr><tr><td> <тело> </тело></td><td> Определяет основной корпус; все, что находится внутри тегов body, отображается на веб-странице</td></tr><tr><td><h2></h2></td><td> Определяет заголовок; Теги от</p><h2><span class="ez-toc-section" id="%D0%B4%D0%BE"></span> до <span class="ez-toc-section-end"></span></h2><h6><span class="ez-toc-section" id="%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D1%8E%D1%82%D1%81%D1%8F_%D0%B4%D0%BB%D1%8F_%D0%B7%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%BE%D0%B2_%D1%80%D0%B0%D0%B7%D0%BD%D0%BE%D0%B3%D0%BE_%D1%80%D0%B0%D0%B7%D0%BC%D0%B5%D1%80%D0%B0_%D0%B3%D0%B4%D0%B5"></span> используются для заголовков разного размера, где <span class="ez-toc-section-end"></span></h6><h2><span class="ez-toc-section" id="%D1%81%D0%B0%D0%BC%D1%8B%D0%B9_%D0%B1%D0%BE%D0%BB%D1%8C%D1%88%D0%BE%D0%B9_%D0%B0"></span> самый большой, а <span class="ez-toc-section-end"></span></h2><h6><span class="ez-toc-section" id="%D1%81%D0%B0%D0%BC%D1%8B%D0%B9_%D0%BC%D0%B0%D0%BB%D0%B5%D0%BD%D1%8C%D0%BA%D0%B8%D0%B9"></span> самый маленький <span class="ez-toc-section-end"></span></h6></td></tr><tr><td></td><td> Это определяет параграф</td></tr></tbody></table><h4><span class="ez-toc-section" id="%D0%97%D0%B0%D0%B3%D0%BE%D0%BB%D0%BE%D0%B2%D0%BA%D0%B8_%D0%B8_%D1%81%D0%BF%D0%B8%D1%81%D0%BA%D0%B8"></span> Заголовки и списки <span class="ez-toc-section-end"></span></h4></p><p> Заголовки используются для начала нового раздела, чтобы помочь читателю понять цель этой части веб-страницы.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/http/images.myshared.ru/117/1445220/slide_15.jpg' /><noscript><img loading='lazy' src='/800/600/http/images.myshared.ru/117/1445220/slide_15.jpg' /></noscript></p></p><p> Вы используете заголовки <code></p><h3></h3><p></code> и <code></p><h4></h4><p></code> для представления различных разделов, таких как заголовок «Raspberry Pi 4», который находится внутри раздела «Фан-страница Raspberry Pi» на веб-странице фан-клуба Raspberry Pi. Думайте о <code></p><h3></h3><p></code> заголовках как о главах книги. Эти отдельные разделы также могут использовать более конкретные заголовки ( <code></p><h4></h4><p></code> тегов, затем <code></p><h5></h5><p></code> тегов и так далее), чтобы ввести подразделы.</p></p><p> <strong> Измените теги заголовков на веб-странице фан-клуба Raspberry Pi, чтобы они были более полезными для читателя. </strong></p></p><p> Вы также можете использовать список на веб-странице фан-клуба Raspberry Pi, чтобы разбить абзац на ключевые моменты. Это может выделить пункты для читателя.</p></p><p> Чтобы создать список на вашей веб-странице, у вас есть два варианта: неупорядоченный список <code></p><ul> </code> , который дает маркеры, или упорядоченный список <code></p><ol> </code> , который дает нумерованные пункты.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf3.ppt-online.org/files3/slide/x/x6jhX5PCkwfAyWSl7KdD9aOmrNE3ZH1oiQ8FBz/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf3.ppt-online.org/files3/slide/x/x6jhX5PCkwfAyWSl7KdD9aOmrNE3ZH1oiQ8FBz/slide-12.jpg' /></noscript> Каждый элемент в списке должен содержаться в пределах <code></p><li> </code> тегов:</p></p><pre> <ул> <li>Обозначение</li> <li>Обозначение</li> </ul> </pre></p><p> <strong> Создайте список на веб-странице фан-клуба Raspberry Pi. </strong> <br /> <strong> Добавьте <code> тегов <em> </code> для выделения курсивом и <code> <strong> </code>, чтобы выделить текст на вашей странице, чтобы выделить ключевые моменты. </strong></p></p><pre> <em>Выделено курсивом.</em> </pre></p><h4><span class="ez-toc-section" id="%D0%98%D0%B7%D0%BE%D0%B1%D1%80%D0%B0%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F_%D0%B8_%D1%86%D0%B8%D1%82%D0%B0%D1%82%D1%8B"></span> Изображения и цитаты <span class="ez-toc-section-end"></span></h4></p><p> Если вы хотите показать логотип Raspberry Pi или помочь читателю понять, что вы делаете на своей странице, вы можете добавить изображение.</p></p><p> Тег <code> <img> </code> используется для определения элемента изображения на веб-странице. Он использует <code> src </code> атрибут для указания источника изображения — где оно хранится. Используемый ниже тег <code> <img> </code> взят с веб-страницы фан-клуба Raspberry Pi:</p></p><pre> <img class="lazy lazy-hidden" decoding="async" src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://sandbox.<img class="lazy lazy-hidden" decoding="async" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/present5.com/presentation/4e974dd2f02bddbb8fa5ee8abbabdabc/image-6.jpg' /><noscript><img decoding="async" src="https://sandbox.<img decoding="async" loading='lazy' src='/800/600/https/present5.com/presentation/4e974dd2f02bddbb8fa5ee8abbabdabc/image-6.jpg' /></noscript> trinket-shell.com/5550343ee6c144dc/raspberrypi.png"> </pre></p><p> В приведенном выше HTML-коде используется унифицированный указатель ресурсов (URL), чтобы указать, где хранится изображение — в данном случае на веб-сайте Trinket.</p></p><p> <code> <цитата> 9Теги 0078 используются, когда вы хотите привести цитату из другого источника; это полезно, когда вы хотите сделать резервную копию точки, которую вы делаете. Это создаст отступ для текста и сообщит читателю, что он отличается от остального текста.</p></p><p> Вы использовали много новых тегов, поэтому я собрал их в этой таблице:</p></p><table><thead><tr><th> Тег</th><th> Описание</th></tr></thead><tbody><tr><td><ul></ul></td><td> Определяет неупорядоченный список, отображаемый в виде маркированного списка</td></tr><tr><td> <ол> </ол></td><td> Определяет упорядоченный список, отображаемый в виде нумерованного списка</td></tr><tr><td><li></li></td><td> Определяет точку списка</td></tr><tr><td> <блочная цитата> </блочная цитата></td><td> Определяет раздел, цитируемый из другого источника</td></tr><tr><td> <img></td><td> Определяет изображение; использует атрибут <code> src </code> внутри тега, чтобы указать источник изображения</td></tr></tbody></table><p> <strong> Добавьте соответствующее изображение на свою веб-страницу фан-клуба Raspberry Pi, добавив элемент <code> <img> </code>, как показано в примере HTML выше.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/schtirlitz.ru/800/600/http/images.myshared.ru/5/489560/slide_5.jpg' /><noscript><img loading='lazy' src='/800/600/https/schtirlitz.ru/800/600/http/images.myshared.ru/5/489560/slide_5.jpg' /></noscript> </strong></p></p><p> Вот URL-адреса трех изображений, которые можно использовать для замены URL-адреса в приведенном выше примере:</p></p><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi2.png</li></ul></li></ul><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi3.png</li></ul></li></ul><ul><li><ul><li> https://rpf-futurelearn.s3-eu-west-1.amazonaws.com/Web+Dev/trinket_images/Rpi4.png</li></ul></li></ul></p><p> <strong> Используйте <code></p><blockquote><p> </code> на своей веб-странице фан-клуба Raspberry Pi. </strong></p><h4><span class="ez-toc-section" id="%D0%9F%D0%BE%D0%B4%D0%B5%D0%BB%D0%B8%D1%82%D0%B5%D1%81%D1%8C_%D1%81%D0%B2%D0%BE%D0%B5%D0%B9_%D0%B2%D0%B5%D0%B1-%D1%81%D1%82%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B5%D0%B9"></span> Поделитесь своей веб-страницей <span class="ez-toc-section-end"></span></h4><ol><li> Сохраните свою веб-страницу фан-клуба Raspberry Pi.</li><li> На своей безделушке нажмите «Поделиться».</li><li> Нажмите «Ссылка».</li><li> Скопируйте ссылку.</li><li> Вставьте ссылку в комментарии ниже для своих сокурсников.</li></ol><p> Посмотрите на другие созданные веб-страницы и сравните их со своей.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/prezentacii.org/upload/cloud/18/12/105531/images/screen3.jpg' /><noscript><img loading='lazy' src='/800/600/https/prezentacii.org/upload/cloud/18/12/105531/images/screen3.jpg' /></noscript> Есть ли что-то, что вы можете взять с веб-страниц других учащихся, чтобы улучшить свою?</p><h2><span class="ez-toc-section" id="%D0%9A%D0%B0%D0%BA%D0%BE%D0%B2%D0%B0_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_%D0%B4%D0%BE%D0%BA%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D0%B0_HTML"></span> Какова структура документа HTML? <span class="ez-toc-section-end"></span></h2><p> HTML – это веб-язык. Он используется для разработки веб-страниц или для организации макетов страниц веб-сайта. HTML расшифровывается как HYPERTEXT MARKUP LANGUAGE, и, как следует из названия, это язык разметки, а не язык программирования. Таким образом, при выполнении HTML-кода такая ошибка возникнуть не может. HTML-код был обработан браузером. Он не компилировался и не интерпретировался.</p><p> HTML использует указанные теги и атрибуты, чтобы указать браузерам, как отображать текст, включая формат, стиль, размер шрифта и отображаемые изображения. HTML — это язык, нечувствительный к регистру. Нечувствительность к регистру означает, что нет различия между прописными и строчными буквами (заглавными и строчными буквами), которые рассматриваются как одно и то же; например, «P» и «p» здесь одинаковы.<br /> В HTML теги делятся на два типа:</p><ul><li> <strong> Парные теги: </strong> Эти теги идут парами.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/cf.ppt-online.org/files/slide/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /><noscript><img loading='lazy' src='/800/600/https/cf.ppt-online.org/files/slide/u/UBOcSM5eaQ3gv1WCrqPY94oTu0FtVfIniwADky/slide-12.jpg' /></noscript> Они имеют как открывающий (< >), так и закрывающий (</ >) теги. Например,<p> ...</p></li><li> <strong> Пустые теги: </strong> Эти теги не идут парами и не содержат информации. Например, <img class="lazy lazy-hidden" decoding="async" src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="" alt=""><noscript><img decoding="async" src="" alt=""></noscript></li></ul><p>HTML-документ разделен на две части:</p><ul><li> <strong> Головная часть </strong>. Заголовок и метаданные веб-документа содержатся в элементе заголовка.</li><li> <strong> Часть тела </strong> — Элемент тела содержит информацию, которую вы хотите отобразить на веб-странице.<br /> Чтобы сделать ваши веб-страницы совместимыми с HTML 4, включите объявление типа документа ( <strong> DTD </strong> ) перед элементом HTML. Когда вы создаете новую веб-страницу, многие программы веб-публикаций автоматически добавляют <strong> DTD </strong> и основные теги.<br /> Первый тег на веб-странице показывает язык разметки, используемый для документа. Тег предлагает информацию о веб-странице. Наконец, содержимое появляется в теге.</li></ul><h3 level="2"><span class="ez-toc-section" id="%D0%91%D0%B0%D0%B7%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0_HTML"></span> Базовая структура HTML <span class="ez-toc-section-end"></span></h3><p> Базовая структура документа HTML состоит из 5 элементов:</p><ul><li> <!DOCTYPE></li><li><html></li><li> <голова></li><li> <название></li><li> <тело></li></ul><h3 level="2"></h3><p><!DOCTYPE></h3><p> Тег в HTML используется для информирования браузера о версии HTML, используемой на веб-странице.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/fs.znanio.ru/d5af0e/e2/6e/0bbff5cf7d6a166917b006814fd723a218.jpg' /><noscript><img loading='lazy' src='/800/600/https/fs.znanio.ru/d5af0e/e2/6e/0bbff5cf7d6a166917b006814fd723a218.jpg' /></noscript> Он упоминается как объявление типа документа <strong> (DTD) </strong> .<br /> На самом деле это не тег/элемент, а скорее инструкция для браузера относительно типа документа. Это нулевой элемент, который не имеет закрывающего тега и не должен содержать никакого содержимого.</p><p> На самом деле существуют различные типы HTML, например. <strong> HTML 4.01 Strict </strong> , <strong> HTML 4.01 Transitional </strong> , <strong> HTML 4.01 Frameset </strong> , <strong> XHTML 1.0 Strict </strong> , <strong> XHTML 1.0 Transitional </strong> , <strong> X HTML 1.0 Frameset </strong> , <strong> XHTML 1.1 </strong> и т. д.</p><p> Так как HTML 4.01 был основан в SGML объявление относится к объявлению типа документа (DTD) в HTML 4.01. Однако HTML 5 не основан на SGML (стандартный обобщенный язык разметки).</p><h4 level="3"><span class="ez-toc-section" id="%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81"></span> Синтаксис <span class="ez-toc-section-end"></span></h4><p> <strong> Пример: </strong> В данном примере мы собираемся использовать тег <!DOCTYPE html> для объявления версии HTML, в которой написана страница. Это пустой тег и не содержит никакой информации.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/rktelecom.ru/wp-content/uploads/1/c/3/1c392d7b5b85b8210ca7b2d8d27bc59c.jpeg' /><noscript><img loading='lazy' src='/800/600/https/rktelecom.ru/wp-content/uploads/1/c/3/1c392d7b5b85b8210ca7b2d8d27bc59c.jpeg' /></noscript> .</p><p> <strong> Вывод </strong></p><h3 level="2"></h3><p><html></h3><p> Тег<html> в HTML используется для указания корня страниц HTML и XHTML. Тег<html> информирует браузер о том, что это HTML-документ. Это второй внешний контейнер для всего в HTML-документе, за которым следует тег. Тег<html> требует наличия начального и конечного тегов.</p><h4 level="3"><span class="ez-toc-section" id="%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81_%D1%82%D0%B5%D0%B3%D0%B0"></span> Синтаксис тега <span class="ez-toc-section-end"></span></h4><p><html></h4><p> <strong> Пример: </strong> В данном примере мы собираемся использовать тег<html>, чтобы показать, как он содержит содержимое HTML-документа.</p><p> <strong> Выход: </strong></p><h3 level="2"></h3><p><head></h3><p> Тег<head> в HTML используется для хранения метаданных ( <strong> данных о данных </strong> ). Он используется между тегами<html> и<body>.</p><p> Заголовок HTML-документа — это раздел документа, содержимое которого не отображается в браузере при загрузке страницы. Он содержит только метаданные документа HTML, которые указывают информацию о документе HTML.</p><p> В зависимости от наших потребностей заголовок HTML может содержать много информации о метаданных или может содержать очень мало информации о метаданных или вообще не содержать ее.<img class="lazy lazy-hidden" loading='lazy' src="//imacrosoft.ru/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='/800/600/https/thepresentation.ru/img/tmb/3/208533/0c2727bdfe7fc26e25b836fac3eaa6c9-800x.jpg' /><noscript><img loading='lazy' src='/800/600/https/thepresentation.ru/img/tmb/3/208533/0c2727bdfe7fc26e25b836fac3eaa6c9-800x.jpg' /></noscript> Тем не менее, раздел заголовка HTML-документа играет важную роль в создании веб-сайта.</p><p> Название документа, набор символов, стили, ссылки, скрипты и другая метаинформация определяются метаданными.</p><p> Ниже приведен список тегов метаданных:</p><ul><li><title></li><li> <стиль></li><li> <мета></li><li> <ссылка></li><li> <скрипт></li><li> <базовый></li></ul><h4 level="3"><span class="ez-toc-section" id="%D0%A1%D0%B8%D0%BD%D1%82%D0%B0%D0%BA%D1%81%D0%B8%D1%81_%D1%82%D0%B5%D0%B3%D0%B0-2"></span> Синтаксис тега <span class="ez-toc-section-end"></span></h4><p><head></h4><p> <strong> Пример: </strong> В этом примере мы будем использовать тег<head>, содержащий</p> <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://imacrosoft.ru/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <script defer src="https://imacrosoft.ru/wp-content/cache/autoptimize/js/autoptimize_9a22f66b6419c03f889f0e980759b0a0.js"></script></body></html>