HTML для начинающих

Источник

Основы разметки HTML

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

HTML разметка

HTML: HTML разметка

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

HTML (HyperText Markup Language) — язык для разметки гипертекста, он является набором правил, по которым браузер отличает заголовки от списков, таблицы от картинок и так далее. HTML появился в 1993 году и был призван стандартизировать правила для вывода текста внутри веб-страниц.

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

Взгляните на типичный пример HTML разметки:

<div>
    <h2>Code Basics</h2>
    <p>Code Basics — бесплатные практические уроки по программированию для тех, кто начинает с нуля. Если вы совсем новичок и хотите научиться основам — переменным, строкам, циклам, функциям и т.д., то Code Basics вам подойдёт.</p>
</div>

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

Задание

Скопируйте HTML и вставьте его в редактор на этой странице

<h1>Hello, World!</h1>
2. Теги 

HTML: Теги

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

Одним из основных тегов является параграф. Параграф отделяет участки текста друг от друга, что позволяет пользователям комфортнее читать текст на странице, и обозначается тегом p (paragraph). Для того, чтобы вставить параграф на страницу, необходимо внутри конструкции <p></p> вставить текст:

<p>Хекслет — практические курсы по программированию. Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Таких параграфов внутри страницы может быть множество — это не уникальный элемент.

<p>Хекслет — практические курсы по программированию.</p>
<p>Мы помогаем новичкам стать профессиональными программистами, а опытным разработчикам получать новые знания и расти профессионально.</p>

Тег p помимо того, что вставляет текст в некий блок, ещё и добавляет отступы снизу и сверху, для того, чтобы визуально отделить один параграф от другого. Предыдущий пример в браузере будет выглядеть следующим образом:

Хекслет — практические курсы по программированию.

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

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

Задание

Оберните в тег <p> фразу Съешь ещё этих мягких французских булочек, да выпей же чаю и вставьте в редактор

3. Текст в HTML

HTML: Текст в HTML

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

Посмотрим на пример текста и попробуем вывести его в браузере вместе с разметкой и без неё. Текст:

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

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

Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.

Если вставить текст на страницу без использования тегов, то получим такой результат:

Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода. При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии. Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.

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

<p>Мы считаем, что настоящий программист должен понимать, как работает компьютер, и обладать вычислительным мышлением. Он должен видеть проблему, а не задание. Должен уметь анализировать и рассуждать на уровне проблемы и выше, а не только на уровне кода.</p>

<p>При сегодняшнем обилии учебных материалов, курсов и книг, главный вопрос, который встает перед новичком — это не «где учиться?», а «что и в каком порядке учить?». Существует множество мнений по этому поводу. Кто-то советует начинать с математики, кто-то советует конкретные языки и технологии.</p>

<p>Хекслет — это готовый путь от абсолютного новичка до первого трудоустройства.</p>

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

Задание

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

Карьерный портал «Мой круг» изучил рынок IT-образования и выяснил, в каких онлайн-школах эффективно учат программированию. В итоговом рейтинге Хекслет занял второе место.

«Мой круг» опросил 3500 IT-специалистов и составил рейтинг онлайн-школ для программистов. В опросе приняли участие пользователи «Моего круга» и «Хабра», которые учились в онлайн-университетах. В финальной таблице «Хекслет» занял второе место.
4. Вложенность тегов

HTML: Вложенность тегов

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

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

<ul>
    <li>Первый элемент списка</li>
    <li>Второй элемент списка</li>
</ul>
  • Первый элемент списка
  • Второй элемент списка

Для определения списка используется тег <ul>, который указывает, что это маркированный список. Внутри располагаются теги <li>, определяющие элементы нашего списка.

Такие вложенности похожи на деревья, где есть вершина дерева (тег <ul>) и листья (теги <li>)

|──ul
  |──li
  |──li

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

Задание

Создайте маркированный список из трёх элементов

5. Атрибуты HTML

HTML: Атрибуты HTML

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


Наведите курсор мыши на эту строку текста


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

  • Имя — название свойства. В примере выше таким свойством является title
  • Значение атрибута. В примере выше значением была фраза «Всплывающая подсказка»

В HTML-разметке пример с всплывающим блоком выглядит так:

<p title="Всплывающая подсказка">Наведите курсор мыши на эту строку текста</p>

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

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

Стандартный вывод текста

Вывод текста по центру

Вывод текста справа

<p>Стандартный вывод текста</p>
<p align="center">Вывод текста по центру</p>
<p align="right">Вывод текста справа</p>

Атрибут align позволяет выравнивать текст на странице. Как видно, он может принимать значения center или right. На самом деле есть ещё значение left, но оно и так стоит по умолчанию для привычных нам языков.

У одного тега может быть несколько атрибутов:

<p align="center" title="Текст по центру">Параграф с несколькими атрибутами</p>

Задание

Создайте тег <p> с атрибутом title. Расположите текст справа


Советы

Текст в HTML

HTML предоставляет десятки правил для работы с текстом: от создания блока текста, до сложных таблиц и вложенных списков. Корректная разметка текста — один из ключевых навыков при работе с сайтом.

6. Параграфы <p>

HTML: Параграфы <p>

Параграфы – основной способ разделять большой непрерывный текст на небольшие блоки. Эти блоки автоматически «отбиваются» друг от друга отступами сверху и снизу. Такой текст намного проще читается и не пугает пользователей.

Параграфы в основном встречаются внутри большого куска текста. Например, любой урок на Хекслете или Code-basics разбит на параграфы для удобства чтения. Но их не используют, или используют значительно реже в других местах — например в меню, списках или таблицах.

Параграфы в HTML-разметке создаются с помощью тега <p>, в тело которого помещается небольшая часть текста. Например:

<p>Первый параграф</p>
<p>Второй параграф</p>

Вот как они выглядят в браузере:

Первый параграф

Второй параграф

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

Задание

Оберните фразу Hello, World в тег параграфа


Советы

  • Параграфы нельзя вкладывать друг в друга

Определения

  • Параграф – Небольшой блок текста, отделяемый от остального содержимого отступами снизу и сверху
7. Заголовки 

HTML: Заголовки

Многие тексты содержат в себе заголовок, обозначающий тему текущего текста на странице. Вспомните доклады, рефераты, дипломы — все они содержат в себе множество заголовков и подзаголовков.

HTML позволяет создавать заголовки с помощью тегов <h1> – <h6>, где <h1> — заголовок первого уровня, самый важный и описывающий главную тему текста, а h6 заголовок самого низшего уровня. Наиболее часто используются заголовки первого (<h1>), второго (<h2>) и третьего (<h3>) уровня.

<h1>Заголовок первого уровня</h1>
<h2>Заголовок второго уровня</h2>
<h3>Заголовок третьего уровня</h3>
<h4>Заголовок четвёртого уровня</h4>
<h5>Заголовок пятого уровня</h5>
<h6>Заголовок шестого уровня</h6>

Заголовки отображаются с новой строки и обрамляются отступами, при этом заголовок первого уровня отображается жирным начертанием и увеличенным размером шрифта. С уменьшением уровня заголовка уменьшается размер шрифта.

Задание

Добавьте в редактор заголовок первого и второго уровня.

8. Начертание текста

HTML: Начертание текста

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

Жирное начертание реализуется с помощью одного из двух тегов: <b> или <strong>. Различие данных тегов в современных браузерах размыто. Изначально предполагалось, что тег <b> будет использоваться только для физического выделения слова или фразы, а <strong> для логического выделения. Все популярные современные браузеры обрабатывают оба тега одинаково, а существенного влияния на обработку поисковыми сервисами (google, yandex) у данных тегов нет.

Тег <b> уместен, если хочется просто выделить слово, чтобы пользователь обратил на него внимание:

<p>Code Basics — <b>курсы</b> по программированию.</p>

Code Basics — курсы по программированию.

Если же мы хотим выделить название проекта, то лучше использовать логическое выделение тегом <strong>:

<p><strong>Code Basics</strong> — курсы по программированию.</p>

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

<!-- Логическое выделение -->
<p><em>Code Basics</em> — курсы по программированию.</p>

<!-- Физическое выделение. Подходит, если нужно, чтобы пользователь обратил внимание -->
<p>Code Basics — курсы по <i>программированию</i>.</p>

Задание

Добавьте в редактор фразу

Хекслет — практические курсы по программированию

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

9. Списки

HTML: Списки

При работе с текстом часто возникает желание сгруппировать информацию, например, список покупок:

- Молоко
- Хлеб
- Вода

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

Если список не содержит последовательных пунктов, то его чаще всего оформляют в маркированный список, который создаётся с помощью тега <ul>. Внутри тега <ul> лежат элементы списка в тегах <li>. Список покупок из примера выше в HTML документе выглядел бы следующим образом:

<ul>
    <li>Молоко</li>
    <li>Хлеб</li>
    <li>Вода</li>
</ul>

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

  • Молоко
  • Хлеб
  • Вода

Для группировки последовательной информации используются нумерованные списки, важной особенностью которых является наличие порядкового номера элемента. Такие списки удобны, если обозначается последовательность действий, которые нужно совершить. Нумерованный список создаётся с помощью тега <ol>, внутри которого также лежат элементы в тегах <li>.

Например, список дел на день

  1. Купить корм
  2. Сходить к Алексею
  3. Приготовить ужин

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

<ol>
    <li>Купить корм</li>
    <li>Сходить к Алексею</li>
    <li>Приготовить ужин</li>
</ol>

Задание

Создайте нумерованный список из 5 элементов

10. Вложенные списки

HTML: Вложенные списки

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

  • Сходить в магазин
    • Купить молоко
    • Купить хлеб
  • Пройти уроки на Code Basics

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

• Сходить в магазин
  Купить молоко

  Купить хлеб

• Пройти уроки на Code Basics

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

<ul>
    <li>Сходить в магазин
        <ol>
            <li>Купить молоко</li>
            <li>Купить хлеб</li>
        </ol>
    </li>
    <li>Пройти уроки на Code Basics </li>
</ul>
  • Сходить в магазин
    1. Купить молоко
    2. Купить хлеб
  • Пройти уроки на Code Basics

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

Задание

Создайте вложенную разметку для списка:

1. Профессия JavaScript
  • Frontend
  • Backend
2. Профессия PHP
11. Таблицы 

HTML: Таблицы

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

Разметка таблицы содержит в себе несколько основных элементов:

  • Тег <table>. Определяет границу таблицы.
  • Тег <tr>. Создание строки.
  • Тег <td>. Создание ячейки.
  • Тег <th>. Создание ячейки с заголовком.

Создадим таблицу из двух строк и трёх столбцов

Первая ячейка Вторая ячейка Третья ячейка
Первая ячейка Вторая ячейка Третья ячейка

Каждая таблица начинается с тега <table>, без которого теги строк и ячеек не будут работать

<table>
    <!-- Здесь будут данные таблицы -->
</table>

Таблицу удобно создать построчно, так как количество ячеек должно быть одинаковым, чтобы при отображении на сайте таблица не «сломалась». Создадим строку с тремя ячейками внутри

<table>
    <tr> <!-- Строка -->
        <td>Первая ячейка</td>
        <td>Вторая ячейка</td>
        <td>Третья ячейка</td>
    </tr>
</table>

Теперь скопируем строку и получим готовую таблицу из двух строк и трёх столбцов.

<table>
    <tr> <!-- Строка -->
        <td>Первая ячейка</td>
        <td>Вторая ячейка</td>
        <td>Третья ячейка</td>
    </tr>


    <tr> <!-- Вторая строка -->
        <td>Первая ячейка</td>
        <td>Вторая ячейка</td>
        <td>Третья ячейка</td>
    </tr>
</table>

Для того, чтобы первую строку сделать заголовками, нужно совершить два действия:
1. Обернуть строку в тег <thead>. Это позволит в будущем задать оформление для строки с заголовками с помощью стилей.
2. Заменить теги <td> на <th>, которые специально созданы для обозначения заголовков таблиц. Помимо логического выделения таких столбцов, браузеры также выделяют текст внутри них жирным, что позволяет быстро находить эти заголовки в таблице.

<table>
    <thead> <!-- Блок с заголовками -->
        <tr> <!-- Строка -->
            <th>Первая ячейка</th>
            <th>Вторая ячейка</th>
            <th>Третья ячейка</th>
        </tr>
    </thead>

    <tr> <!-- Вторая строка -->
        <td>Первая ячейка</td>
        <td>Вторая ячейка</td>
        <td>Третья ячейка</td>
    </tr>
</table>

Последним шагом станет добавление тега <tbody>. Часто разработчики его упускают, потому что браузеры автоматически оборачивают им группу строк, которые не обёрнуты в другие теги. Обратите внимание — тег <tbody> чаще всего только один в таблице. В больших таблицах можно использовать несколько <tbody>, чтобы отделить разные секции в таблице, но в большинстве случаев в этом нет необходимости.

<table>
    <thead> <!-- Блок с заголовками -->
        <tr> <!-- Строка -->
            <th>Первая ячейка</th>
            <th>Вторая ячейка</th>
            <th>Третья ячейка</th>
        </tr>
    </thead>

    <tbody> <!-- Тело таблицы -->
        <tr> <!-- Вторая строка -->
            <td>Первая ячейка</td>
            <td>Вторая ячейка</td>
            <td>Третья ячейка</td>
        </tr>
    </tbody>
</table>

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

Задание

Создайте таблицу из 3-х строк с 2-мя ячейками в каждой. Первая строка содержит в себе заголовки таблицы

12. Объединение ячеек внутри строк и столбцов

HTML: Объединение ячеек внутри строк и столбцов

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

Товар Цена Количество
Чай Нет на складе

В HTML-разметке объединить ячейки в столбцах или строках можно с помощью специальных атрибутов colspan и rowspan. Их значениями является количество ячеек справа (для colspan) или снизу (для rowspan), которые нужно объединить с текущей. Отсчёт начинается с текущей ячейки, к которой применено свойство. Например, если стоит значение colspan="2", то будет объединена текущая ячейка с соседней.

Разметка для примера выше без учёта объединения ячеек будет следующей:

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
            <th>Количество</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Чай</td>
            <td>Нет на складе</td> <!-- ячейка, которую хотим объединить -->
            <td></td>
        </tr>
    </tbody>
</table>

Для того, чтобы объединить ячейки, нужно сделать два действия:
1. В главную ячейку (которую будем объединять с другими) поместить атрибут colspan со значением, равным количеству объединяемых ячеек справа.
2. Удалить лишние ячейки из строки.

<table>
    <thead>
        <tr>
            <th>Товар</th>
            <th>Цена</th>
            <th>Количество</th>
        </tr>
    </thead>

    <tbody>
        <tr>
            <td>Чай</td>
            <td colspan="2">Нет на складе</td>
        </tr>
    </tbody>
</table>

При объединении ячеек в столбцах нужно удалять все лишние ячейки из строк, с которыми было объединение.

Задание

Добавьте таблицу с 2 строчками и 3 столбцами. Во второй строке объедините первые две ячейки, используя атрибуты. Первая строка должна быть заголовком таблицы

13. Специальные символы

HTML: Специальные символы HTML

В тексте возможно использование специальных символов — их ещё называют «Символы-мнемоники». Они позволяют использовать символы, которые присутствуют в таблице символов, но отсутствуют на клавиатуре, например, математические и греческие символы:

ξ π ϒ

Для записи этих символов используется конструкция &название-символа; Важно соблюдать регистр букв в названии символа.

Для примера возьмём символы мастей у карт:

Символ Код
&clubs;
&spades;
&hearts;
&diams;

Со многими из этих символов можно ознакомиться на «Википедии».

Основными типографическими мнемониками в HTML являются:
&nbsp; — неразрывный пробел. Очень важная вещь, которая позволяет не переносить строку с пробелом там, где это может испортить логическую структуру текста.
&laquo; и &raquo; — традиционные «кавычки-ёлочки». Повсеместно используются в типографике.
&mdash; — длинное тире

Также мнемоники распространены, когда необходимо вставить теги без их обработки браузером. В таком случае можно воспользоваться мнемониками &lt; и &gt;, которые нужны для обозначения < и > соответственно:

&lt;p&gt; такая разметка не будет обработана как параграф &lt;/p&gt;

Задание

Запишите в редакторе символ простой дроби «одна четвёртая»

14. Ссылки

HTML: Ссылки

Для перемещения между страницами был придуман главный элемент в интернете — гиперссылки.

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

Для создания ссылки используется тег <a> с обязательным атрибутом href — указанием страницы, на которую произойдёт переход после клика.

<a href="Ссылка на документ">Текст ссылки</a>

Ссылки можно поделить на 3 типа:
Относительные. Такие ссылки ссылаются на тот же сайт, с которого и происходит переход.
Абсолютные. Позволяют переходить на сторонние ресурсы в интернете.
Ссылки-якоря. Используются для перемещения внутри текущего документа.

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

<a href="/languages/html">Вернуться на выбор уроков</a>
<!-- Ссылка указывает на документ внутри текущего сайта -->
<a href="https://code-basics.ru/">Перейти на сайт Code Basics</a>
<!-- Ссылка указывает на документ стороннего сайта. В данном случае на главную страницу Code Basics -->

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

Создание ссылки-якоря состоит из двух действий:
1. Блоку на странице, к которому мы хотим совершить переход, нужно указать уникальный идентификатор. Делается это с помощью атрибута id.
2. Разместить тег <a>, и в атрибуте href указать ссылку вида #название-уникального-идентификатора.

<a href="#anchor">Переход на главу 2</a>
...
...
...
<div id="anchor">
    <h2>Глава 2</h2>
</div>

Задание

Вставьте в редактор абсолютную ссылку на портал https://mind-flows.com/

15. Форматированный текст

HTML: Форматированный текст

Иногда возникает потребность вставить текст, сохраняя его оригинальное форматирование. Взглянем на знаменитую «лесенку Маяковского» из стихотворения «Сергею Есенину».

    Вы ушли,
            как говорится,
                          в мир в иной.
    Пустота...
            Летите,
                  в звезды врезываясь.
    Ни тебе аванса,
                  ни пивной.
    Трезвость.

Владимир Маяковский считал, что именно в таком виде лучше всего оформляется ритм стиха.

Оформить такой текст с помощью спецсимволов в HTML очень сложно. Придётся «жонглировать» пробельными спецсимволами. Из-за этого такую разметку будет очень сложно поддерживать в будущем:

<p>Вы ушли,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;как говорится,</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;в мир в иной.</p>

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

<pre>
Вы ушли,
        как говорится,
                      в мир в иной.
Пустота...
        Летите,
              в звезды врезываясь.
Ни тебе аванса,
              ни пивной.
Трезвость.
</pre>

Внутри тега pre можно использовать теги для оформления текста: <i><em><b><strong>.

Задание

Добавьте любой текст в тег <pre> и вставьте его в редактор. Попробуйте различные варианты текстов.

16. Вставка компьютерного кода в HTML

HTML: Вставка компьютерного кода в HTML

При ведении учебных блогов по программированию, либо при написании статей, возникает необходимость продемонстрировать код. В каждом уроке на Code Basics есть такие блоки:

<p>Здесь видно разметку</p>

Для создания блока с кодом используется тег <code>, внутри которого записывается код на любом языке программирования.

// Пример кода на JavaScript
const square = (num) => {
  return num * num;
};

Тег <code> часто используют вместе с тегом <pre>, что позволяет сохранить форматирование. Если тег <pre> не используется, то переносы строк нужно контролировать самостоятельно, например, оборачивая каждую строку в тег <p>.

Важно, что все теги внутри <code> будут обработаны браузером, по этой причине внутри используются специальные символы. Также частое решение — оборачивание названия тега в отдельный тег, например <span>:

<code>
    <<span>p</span>>Вставляем тег p в виде простого текста <<span>/p</span>>
</code>

Задание

Добавьте любой текст в тег <code> и вставьте его в редактор. Попробуйте различные варианты текстов.

Медиаэлементы

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

17. Изображения 

HTML: Изображения

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

Картинки на странице не существуют сами по себе. Предварительно они должны быть загружены в директорию на сервере или на специальный хостинг картинок. Для вставки картинки на страницу используется непарный тег <img>, у которого два обязательных атрибута: src и alt.

src

В атрибуте src указывается путь к картинке. Это тоже ссылка, как и в теге <a>, только теперь мы не перенаправляем пользователя по ней, а наоборот — сообщаем браузеру, что нужно отобразить картинку по этому адресу. Путь к картинке может быть как относительный, так и абсолютный.

<img src="/images.png">

alt

Что делать, если наша картинка в данный момент недоступна? Браузеры тогда показывают маленькую картинку, обозначающую, что изображение недоступно.

Как пользователь поймёт, что здесь было? Может изображение критически важное для статьи, и стоит через некоторое время вернуться к материалу, когда изображение будет вновь доступно?

Для решения этой проблемы используется атрибут alt, в котором указывается текст. Он отобразится при невозможности загрузить изображение.

<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год">

Теперь пользователь при наличии проблемы с изображением увидит, «что в нём было»

Важной составляющей при работе с изображениями являются его размеры. Скачав картинку со стороннего ресурса и вставив на страницу, часто возникает ситуация, что изображение очень большое, и его нужно уменьшить. Для этого существуют атрибуты width и height, которые позволяют установить ширину и высоту для картинки.

<img src="https://example.com/images.png" alt="Аналитика компании за 2007 год" width="320" height="240">

Теперь картинка будет отображена в размере 320×240 пикселей.

Важно помнить, что использование атрибутов width и height не меняет физический размер картинки — она будет весить столько же, изменится только визуальный размер. Для оптимизации страницы подбирайте картинки нужного размера или уменьшайте их с помощью графического редактора, либо специальных сервисов. Сейчас многие пользуются мобильными телефонами и мобильным интернетом, поэтому вес страницы имеет важное значение.

Задание

Вставьте в редактор картинку по адресу https://www.w3.org/2008/site/images/logo-w3c-screen-lg.png и текстом W3C для случаев, если картинка недоступна

18. Аудио 

HTML: Аудио

Ранее для добавления аудио на HTML-страницу было необходимо пользоваться специальными «расширениями», которые давали возможность встраивать на страницу аудио-плеер. Начиная со стандарта HTML5, данная возможность есть по умолчанию — и реализуется с помощью тега <audio>.

Данный тег является парным и в самом простом случае выглядит так:

<audio src="путь к аудио-файлу" controls></audio>

Атрибут controls добавляет элементы интерфейса для плеера. Каждый браузер реализует их по своему, и единого стандарта на этот счёт нет.

При добавлении аудио на HTML-страницу важно помнить, что не все браузеры поддерживают одни и те же форматы аудио. Специально для этого существует вложенный тег source, в котором указываются пути на другие форматы аудио файлов. В таком случае браузер выберет тот, который поддерживается в настоящий момент. При такой разметке указывать src у тега <audio> не обязательно.

<audio controls>
    <source src="https://example.com/audio.mp3">
    <source src="https://example.com/audio.ogg">
</audio>

Задание

Добавьте аудио на страницу. Используйте следующие аудио файлы:
* https://www.w3schools.com/html/horse.ogg
* https://www.w3schools.com/html/horse.mp3

19. Видео 

HTML: Видео

Так же, как и с аудио, ещё недавно в HTML-разметку нельзя было «комфортно» вставить видео-файл. Начиная с HTML5 появился элемент <video>, который, как и <audio>, позволяет быстро добавить необходимое видео на страницу.

Тег <video> парный, в котором, при отсутствии вложенных тегов <source>, указывается путь к видео-файлу в атрибуте src. Также с помощью атрибута controls можно вывести элементы управления для проигрывателя. Стилистика элементов зависит от конкретного браузера.

<video src="https://example.com/our-video.mp4" controls></video>

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

<video controls>
    <source src="https://example.com/our-video.mp4" type="video/mp4">
    <source src="https://example.com/our-video.webm" type="video/webm">
    <source src="https://example.com/our-video.ogg" type="video/ogg">
</video>

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

Тег <video> имеет несколько важных атрибутов:
controls — Добавляет элементы управления для видеоплеера.
autoplay — Автоматическое воспроизведение после загрузки видео.
width — Ширина видеоплеера.
height — Высота видеоплеера.

Атрибуты width и height принимают значения в пикселях, при этом указывать единицу измеренения не нужно.

<video width="500" height="500" controls>
    <source src="https://example.com/our-video.mp4" type="video/mp4">
    <source src="https://example.com/our-video.webm" type="video/webm">
    <source src="https://example.com/our-video.ogg" type="video/ogg">
</video>

Задание

Добавьте видео в формате mp4 на страницу:
* Ссылка на видео: https://www.w3schools.com/html/movie.mp4
* У видеоплеера должны быть элементы управления
* Высота плеера: 240
* Ширина плеера: 320
* Путь к файлу укажите в теге <video>

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

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

20. Базовая структура

HTML: Базовая структура

Любой HTML-документ можно разбить на несколько основных составляющих:
* Блок head, содержащий мета-информацию о нашем сайте. Данные из этого блока не отображаются непосредственно на странице, а служат для её описания, подключения стилей и скриптов.
* Блок body является основным местом, где строится HTML-разметка. Данные в этом блоке будут обработаны и выведены в браузер.

Простейшая разметка в HTML5 выглядит следующим образом:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Базовая разметка HTML</title>
</head>
<body>
    <h1>Code Basics</h1>
    <p>Бесплатные уроки по программированию и HTML для новичков</p>
</body>
</html>

Обратите внимание на первую строку <!DOCTYPE html>. DOCTYPE (document type) — служебная информация для браузера, где описывается стандарт HTML, который нужно обработать. Текущий стандарт HTML5 поддерживается всеми браузерами, поэтому достаточно указать в первой строке документа <!DOCTYPE html>, который говорит, что наш документ размечен по стандарту HTML5.

Далее открывается парный тег <html> с атрибутом lang="ru". Указание языка также необходимо для браузеров, особенно если сайт рассчитан на массовую аудиторию, в том числе и за рубежом.

Во избежание ошибок, обе вышеописанные конструкции, при их отсутствии, будут добавлены браузером автоматически. В некоторых ситуациях браузеры могут добавить не те строки, которые вы бы хотели, и вместо обработки страницы по стандарту HTML5 браузер будет обрабатывать всё как HTML4, что приведёт к множеству проблем.

Задание

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

21. Мета-теги

HTML: Мета-теги

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

При выводе результатов поискового запроса (например в Google или Yandex) также показывается этот заголовок и описание.

Результат поискового запроса. Показывается заголовок и описание

При добавлении статьи с сайта на страницу в социальных сетях появляется картинка и описание.

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

Title

За заголовок во вкладке браузера отвечает тег <title>, внутри которого содержится заголовок страницы. Часто советуют использовать заголовок от 50 до 80 символов. Такое ограничение существует из-за того, что поисковые системы не могут показать больше символов в качестве заголовка страницы в результатах поисковой выдачи. Заголовок внутри тега <title> отобразится во вкладке в браузере.

<title>Code Basics: основы программирования</title>

Description

Для добавления описания страницы используется мета-тег description. В нём обычно дают краткое описание для страницы и часто его можно увидеть в результатах поиска в поисковых системах.

<meta name="description" content="Бесплатные практические уроки по программированию для тех, кто начинает с нуля.">

Open Graph

Open Graph (og) — придуманный в компании Facebook набор мета-тегов, которые позволяют задавать уникальную картинку и описание страницы при публикации в социальных сетях. Данные мета-теги сейчас поддерживаются почти всеми известными социальными сетями и мессенджерами. Их добавление на страницу является хорошей практикой.

Основными og мета-тегами являются:
og:title — заголовок страницы. При публикации в социальных сетях будет использоваться вместо заголовка <title>.

<meta property="og:title" content="Code Basics: основы программирования">
  • og:description — описание страницы. Заменяет для социальных сетей описание из мета-тега description.
<meta property="og:description" content="Бесплатные практические уроки по программированию для тех, кто начинает с нуля.">
  • og:image — изображение страницы. Один из важнейших og мета-тегов. Если он не указан, то робот старается автоматически найти картинку внутри страницы. Эти картинки не всегда находятся правильные по смыслу, поэтому можно чётко указать, какую картинку будет использовать социальная сеть.
<meta property="og:image" content="/images-header.png">

При отсутствии OG мета-тегов социальные сети будут брать данные из стандартных мета-тегов <title> и description на HTML странице.

Задание

Добавьте в редактор 3 мета-тега:
* title
* description
* og:image

Значение мета-тегов произвольное. Для title используйте специальный тег, указанный в начале этого урока.


Советы

22. link

HTML: link

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

HTML для начинающих

 

 

Для того, чтобы установить такую иконку на страницу, используется тег <link>, у которого нужно указать два атрибута: rel для указания контента и href для указания ссылки на иконку.

<link rel="icon" href="/favicon.png">

Разные устройства могут отображать иконки разных размеров и форматов, поэтому сейчас добавляется не одна, а сразу несколько иконок. У тега <link> возможно указать тип изображения и его размер. Делается это с помощью атрибутов type и sizes. Укажем, что иконка формата png и размером 32×32

<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">

После неё можно указать ещё несколько иконок с разными размерами:

<link rel="icon" href="/favicon64.png" type="image/png" sizes="64x64">
<link rel="icon" href="/favicon32.png" type="image/png" sizes="32x32">
<link rel="icon" href="/favicon16.png" type="image/png" sizes="16x16">

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

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

Задание

Добавьте link на фавиконку https://www.w3schools.com/favicon.ico с размером 64×64.


Советы

23. Viewport 

HTML: Viewport

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

Впервые данный мета-тег появился в браузерах от компании Apple «Safari». До появления мобильных устройств браузер Safari по умолчанию считал, что все страницы в интернете имеют ширину в 980 пикселей, из-за чего на первых версиях iPod и iPhone сайты отображались не полностью, а только первые 320 пикселей по ширине.

Сейчас такая проблема решается указанием ширины сайта для устройств. Наиболее часто используют значение device-width у параметра width, которое устанавливает ширину страницы, равную ширине экрана устройства.

<head>
    <meta name="viewport" content="width=device-width">
</head>

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

Основные параметры мета-тега viewport

  • width — ширина сайта. Указывается в пикселях. Возможно использование значения device-width для установки ширины страницы равной ширине устройства.
  • height — высота сайта. Указывается в пикселях. Возможно использование значения device-height для установки высоты страницы равной высоте устройства.
  • initial-scale — начальный коэффициент масштабирования. Может принимать значение от 0.1 до 10. Значение единица не масштабирует страницу по умолчанию.
  • user-scalable — указывает, может ли пользователь масштабировать страницу, то есть приближать или отдалять её. Принимает значение yes и no
<!-- viewport шириной 980px с начальным масштабированием 1 и запретом пользователю масштабирования документа -->
<head>
    <meta name="viewport" content="width=980, initial-scale=1.0, user-scalable=no">
</head>

Задание

Добавьте мета-тег viewport с шириной экрана 1024px, без возможности масштабирования со стороны пользователя.

24. Блочные и строчные элементы

HTML: Блочные и строчные элементы

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

Помимо блочных элементов существуют строчные элементы. К ним относятся ссылки (<a>), теги начертания текста (<b><strong><i><em>), картинки, <span>. Они не влияют на расположение соседних элементов и предназначены для придания смысловой нагрузки. В отличие от блочных элементов, строчные не занимают всю ширину экрана.

<p>Параграф является блочным элементом.</p>
<p>Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.</p>

<span>Span является строчным элементом.</span>
<span>Он занимает ширину, равную ширине своего контента, поэтому переноса строки нет</span>

Параграф является блочным элементом.

Он занимает всё пространство по ширине, поэтому каждый параграф начинается с новой строки.

Span является строчным элементом. Он занимает ширину равной ширине своего контента, поэтому переноса строки нет

Задание

Добавьте два тега <span> с текстом внутри. Посмотрите, как они будут расположены

Формы

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

25. Формы в HTML

HTML: Формы в HTML

При взаимодействии с HTML-документами одно из частых действий — ввод данных в различные поля документа. Например, ввод данных в строку поиска. Именно так вы ищете информацию с помощью поисковых систем (например, Google или Yandex): вводите запрос, он отправляется на сервер (компьютер, на котором расположен сайт), и на выходе вы получаете результат поиска.

Такое взаимодействие осуществляется с помощью форм — набора полей и кнопок действий. Важно помнить, что HTML не умеет обрабатывать данные, которые были отправлены через форму. Для взаимодействия с этими данными нужно использовать языки программирования, которые работают на сервере, например JavaScript или PHP. Основы программирования на этих языках есть в соответствующих разделах на Mind-flows:

Любая форма начинается с главного тега <form>, внутри которого и будут располагаться поля для заполнения и кнопка действия.

<form>
    // Внутри формы будут поля для ввода данных и кнопка с действием (отправкой данных)
</form>

Основным атрибутом у тега <form> является action — путь к файлу, где располагается обработчик данных. Именно туда уйдут данные после отправки формы.

<form action="/search">
  // Данные, после заполнения, будут отправлены на страницу /search
</form>

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

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people

26. Поле для ввода текста

HTML: Поле для ввода текста

Одним из основных элементов форм является тег <input>. Он позволяет задать различные поля для ввода данных: текст, пароли, чекбоксы, радио кнопки, кнопки отправки, загрузка файла, ввод даты и так далее. Начиная со стандарта HTML5 список полей пополнился множеством новых вариантов. Базовыми типами инпутов являются:

  • Текст
  • Пароли
  • Чекбоксы
  • Радио кнопки

Самый простой способ использования <input> — создание текстового поля для ввода. Именно <input> присутствует во всех полях поиска. Чтобы создать простое текстовое поле для ввода данных, необходимо в тег form добавить непарный тег <input> и указать у него атрибут type со значением text:

<form>
    <input type="text">
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 текстовых поля

27. Чекбокс 

HTML: Чекбокс

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

Чекбоксы позволяют выбирать множество элементов из представленных (например, в анкете):




Для создания чекбокса используются два тега:

  • <input> с указанием type="checkbox";
  • <label>, в котором будет текст, связанный с нужным нам чекбоксом.

Для создания связи <label> с <input> тоже существует два способа:

  • Связь по id. Для этого необходимо задать уникальный id для <input> и связать <label> с чекбоксом с помощью атрибута for.
<form>
    <input id="html" type="checkbox">
    <label for="html">Хочу изучать HTML</label>
</form>
  • Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется.
<form>
    <label>
        <input type="checkbox">
        Хочу изучать HTML
    </label>
</form>

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

<form>
    <label>
        <input type="checkbox" name="languages" value="HTML">
        Хочу изучать HTML
    </label>
    <br>
    <label>
        <input type="checkbox" name="languages" value="CSS">
        Хочу изучать CSS
    </label>
    <br>
    <label>
        <input type="checkbox" name="languages" value="JS">
        Хочу изучать JS
    </label>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 чекбокса. Свяжите их вложив <input> внутри <label>. Не забудьте добавить атрибуты name и value

28. Радиокнопка 

HTML: Радиокнопка

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

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

Выбор радиостанции




Для создания радиокнопки, также, как и чекбокса, используются два тега:

  • <input> с указанием type="radio". Обязательным атрибутом является name, значением которого является имя. Данное имя должно быть одинаковым у всей группы радиокнопок. Без этого атрибута будет возможно выбрать все значения сразу, так как браузер не будет видеть связи между ними.
  • <label>, в котором будет текст, связанный с нужной нам радиокнопкой.

Для создания связи <label> с <input> тоже существует два способа:

  1. Связь по id. Для этого необходимо задать уникальный id для <input>, и связать <label> с радиокнопкой с помощью атрибута for.
      <form>
          <input id="yes" type="radio" name="question">
          <label for="yes">Да</label>
    
          <input id="no" type="radio" name="question">
          <label for="no">Нет</label>
      </form>
    
  2. Вложить <input> внутрь тега <label>. При этом указание уникального id не требуется.
      <form>
          <label>
              <input type="radio" name="question">
              Да
          </label>
          <br>
          <label>
              <input type="radio" name="question">
              Нет
          </label>
      </form>
    

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

<form>
    <label>
        <input type="radio" name="question" value="yes">
        Да
    </label>
    <br>
    <label>
        <input type="radio" name="question" value="no">
        Нет
    </label>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте 2 радиокнопки. Свяжите их вложив <input> внутри <label>. Уникальное имя для радиокнопок gender. Не забудьте добавить атрибут value

29. Список 

HTML: Список

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

В какой категории искать?

JS
PHP
Java
Racket
HTML
CSS

Для создания такого выпадающего списка используется тег <select> с вложенными внутри него тегами <option>. Всё это похоже на создание обычных списков, где вместо ul/ol используется <select>, а вместо li используется <option>. Также часто первый пункт списка используется для заголовка всего выпадающего списка. В таком случае для него используют атрибут disabled, чтобы заблокировать его для выбора.

<form>
    <select>
        <option disabled>Какой курс вы хотите пройти?</option>
        <option>JS</option>
        <option>PHP</option>
        <option>Java</option>
        <option>Racket</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
</form>
Какой курс вы хотите пройти?
JS
PHP
Java
Racket
HTML
CSS

Список внутри формы также может быть представлен в виде списка, в котором можно выбрать несколько элементов. Делается это с помощью зажатия кнопки ctrl и клика мышки по полям, которые мы хотим выбрать.

В какой категории искать?

JS
PHP
Java
Racket
HTML
CSS

Для того, чтобы создать список с множественным выбором, у тега <select> добавляется атрибут multiple

<form>
    <select multiple>
          <option>JS</option>
          <option>PHP</option>
          <option>Java</option>
          <option>Racket</option>
          <option>HTML</option>
          <option>CSS</option>
    </select>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте выпадающий список из трёх элементов.

30. Отправка формы

HTML: Отправка формы

Последним шагом в создании формы является добавление кнопки для отправки результата на сервер. Для этого, используя парный тег <button>, создадим кнопку отправки:

<form>
    <button>Отправить</button>
</form>

После нажатия на кнопку «Отправить», данные будут переданы обработчику, который указан в атрибуте action (если не указан, то данные отправятся на эту же страницу). После отправки данных страница будет перезагружена.

Теперь, используя элементы форм из прошлых уроков, создадим форму с разными полями.

<h2>Форма поиска</h2>
<form>
    <label>
        Введите ваш запрос
        <input type="text">
    </label>
    <select>
        <option disabled>В каком разделе искать?</option>
        <option>JS</option>
        <option>HTML</option>
        <option>CSS</option>
    </select>
    <button>Искать</button>
</form>

Форма поиска

 
В каком разделе искать?
JS
HTML
CSS
 

Если вы нажмёте на кнопку «Искать», то страница перезагрузится и данные должны будут уйти в обработчик на эту же страницу. Так как обработчика нет, то никаких видимых результатов, кроме перезагрузки страницы, не произойдёт.

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы расположите следующие элементы:
* 2 текстовых поля <input>
* Список с возможностью множественного выбора
* Кнопку «Отправить»

31. Textarea 

HTML: Textarea

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

Оставьте свой отзыв

<form>
    <textarea></textarea>
</form>

Заметьте, что <textarea> является парным тегом. Это означает, что вы можете вложить в него текст по умолчанию, чтобы пользователь быстрее понял, что ему необходимо ввести.

По умолчанию высота и ширина <textarea> зависит от настроек браузера. Это значит, что в разных браузерах высота и ширина может меняться. Для того, чтобы установить одинаковое значение, используются атрибуты rows и cols, означающие количество строк и столбцов соответственно.

<form>
    <textarea rows="5" cols="30">textarea с 5 строками и 30 столбцами</textarea>
</form>

Задание

Создайте форму, у которой файл с обработчиком данных лежит по адресу /people. Внутри формы создайте поле для многострочного ввода. Количество строк для ввода: 4. Количество столбцов: 30

Разное

Говоря об HTML, нельзя пропустить темы, связанные с работой интернета в целом. Микроразметка, семантика, валидация — важные знания при работе с HTML документами.

32. Семантический WEB

HTML: Семантический WEB

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

Эта проблема остро заявила о себе с начала нового тысячелетия, когда количество страниц в интернете неуклонно стало расти, и поисковые роботы (Google, Bing, Yandex, Yahoo) имели малые возможности для корректного анализа каждой страницы в интернете, из-за чего веб-мастера специально указывали популярные, на то время, ключевые слова на сайте, чтобы подняться в результатах поиска.

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

Правильная семантика также позволяет устройствам правильно воспринимать части веб-сайта. Например, режим чтения в телефонах старается отбросить не связанные с контентом блоки, чтобы оставить только смысловую часть.

Стандартное отображение урока на Code Basics и отображение в режиме чтения

Существуют две реализации семантического веба:

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

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

Пример семантической разметки на HTML5

<main> <!-- Определение основной части страницы -->
    <article> <!-- Определение статьи -->
        <header> <!-- Заголовочная информация статьи -->
            <h1>Название статьи</h1>
            <img src="article.png" alt="Заголовок статьи">
        </header>

        <p>Текст нашей статьи</p>

        <footer> <!-- «Подвал статьи» с указанием автора и даты -->
          <address> <!-- Информация об авторе статьи -->
              <p>Автор: Дмитрий</p>
              <p>Email: [email protected]</p>
          </address>
          <time datetime="2019-07-27">27 июля</time> <!-- Дата написания статьи -->
        </footer>
    </article>
</main>

Задание

Создайте разметку статьи, как в примере выше. Данные внутри могут быть произвольными

33. Микроразметка 

HTML: Микроразметка

Говоря о семантике, был затронут такой формат разметки, как микроразметка, позволяющий поисковым роботам корректно анализировать информацию на странице. Правильная разметка страницы с помощью микроразметки позволяет выводить в результатах поискового запроса не только ссылку на сайт и небольшое описание, но и такие важные вещи, как контактные данные, время работы, адрес, номер телефона.

Микроразметка — простой инструмент, и создаётся с помощью дополнительных атрибутов HTML-тегов.

Существует множество видов микроразметки, наиболее распространённым из которых является Schema.org с широким выбором «словарей» для описания данных на странице. Словарь — это небольшой набор правил, по которым можно описать блоки на странице. Сеансы фильмов в кинотеатре, данные отдела продаж, цены на товары, отзывы о статье — всё это представлено в небольших словарях.

Основные действия при создании разметки можно разделить на несколько пунктов:
* Выбор словаря. Узнать о поддержке тех или иных словарей поисковой системой можно с помощью документации. Для поисковой системы Яндекс все доступные словари указаны здесь.
* Определение блока, который необходимо разметить. Иногда это может быть целая страница на вашем сайте. Для разметки контактов зачастую просто берут одноимённую страницу.
* Выделение основной информации. На примере разметки контактной информации это: название организации, телефон, email, адрес.
* Проставление определённых атрибутов, в зависимости от типа информации.

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

Для примера возьмём контактные данные вымышленной компании «Прауд», и разметим её контакты, используя Schema.org. Изначально блок с контактами выглядит следующим образом:

<section>
    <h1>Компания «Прауд»</h1>
    <p>Адрес: г.Мотино, улица Строителей, дом 6</p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

Первое, что нам надо сделать — выбрать словарь. Поисковая система Яндекс для этого предлагает несколько вариантов. Возьмём словарь Organization. Полное описание этого словаря можно найти на сайте https://schema.org/. В данном уроке не ставится цель научить вас полностью размечать данные. Здесь мы лишь покажем пример того, как это выглядит.

Для того, чтобы подсказать поисковой системе, что данные размечены определённым словарём, необходимо указать два атрибута:
itemscope — указатель на то, что весь блок является единой сущностью, в котором все данные связаны. Указывается только у главного блока и не имеет своего значения.
itemtype — указывает на то, какой словарь будет использоваться. Например, для описания наших данных мы решили использовать словарь Organization, тогда полный вид атрибута будет itemtype="http://schema.org/Organization".

<section itemscope itemtype="http://schema.org/Organization">
    <h1>Компания «Прауд»</h1>
    <p>Адрес: г.Мотино, улица Строителей, дом 6</p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

Теперь поисковая система будет знать, что внутри этого блока находятся данные о нашей организации. Приступим к разметке адреса. Schema.org позволяет отдельно указывать улицу, дом, строение и так далее, но мы обобщим всё это и используем только одно значение itemprop="address", чтобы обозначить адрес предприятия. Обратите внимание, что элементы разметки указываются с помощью атрибута itemprop.

<section itemscope itemtype="http://schema.org/Organization">
    <h1>Компания «Прауд»</h1>
    <p>Адрес: <span itemprop="address">г.Мотино, улица Строителей, дом 6</span></p>
    <p>Телефон: 8 (8765) 333-00-00</p>
    <p>Email: [email protected]</p>
</section>

По аналогии с адресом разметим все остальные данные: название, телефон, email. Для каждого из них существует своё значение атрибута itemprop. Обратите внимание, что мы размечаем только данные, оставляя за «бортом» название поля. Для этого часто нужные данные оборачивают в span и для него указывают атрибут.

<section itemscope itemtype="http://schema.org/Organization">
    <h1 itemprop="name">Компания «Прауд»</h1>
    <p>Адрес: <span itemprop="address">г.Мотино, улица Строителей, дом 6</span></p>
    <p>Телефон: <span itemprop="telephone">8 (8765) 333-00-00</span></p>
    <p>Email: <span itemprop="email">[email protected]</span></p>
</section>

Для проверки корректности микроразметки можно пользоваться инструментами популярных поисковых систем:
Google
Yandex

Попробуйте вставить тестовый пример в эти инструменты и взгляните на результат. Можете попробовать «сломать» микроразметку и посмотреть на вывод ошибок.

Задание

Создайте разметку организации, в которой укажите:
* Название организации
* Email организации

Теги используются на своё усмотрение. Вся семантика строится на уровне микроразметки. В качестве словаря используйте http://schema.org/Organization

34. Ошибки в HTML-разметке

HTML: Ошибки в HTML-разметке

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Примеры ошибок</title>
</head>
<body>
    <p>Текст</span> <!-- Закрыли не тот тег -->
    <img src="images.png"> <!-- Не указали обязательный атрибут alt -->
</body>
</html>

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

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

Валидатор показывает ошибки разметки

  1. Отсутствие открывающего тега <span>, который сейчас оказался закрыт. Обычно это означает, что мы или случайно закрыли не тот тег, как в данном случае, или открыли не тот. Современные редакторы кода помогают избежать этой ошибки, так как они автоматически закрывают теги при их создании.
  2. Отсутствие обязательного атрибута alt у тега <img>.

Распространённым валидатором является онлайн сервис от W3C, его можно найти по ссылке https://validator.w3.org/. Он поддерживает все стандарты HTML, поэтому важно не забывать проверять разметку с его помощью.

Задание

Исправьте ошибки в примере кода из теории. В тексте предполагалось использование тега <p>, а не <span>. Вставьте две исправленные строчки в редактор.

Семантические элементы HTML5

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

35. Семантические элементы

HTML: Семантические элементы

При создании HTML-документа часто используются теги <div> и <span>. Они позволяют обернуть контент в блочный или строчный элемент разметки. Это помогает создавать независимые блоки с разным оформлением, но для браузера и поисковых систем эти блоки не являются семантическими, т.е. они не говорят напрямую о том, что в них лежит. Многие из HTML-тегов изначально обладают семантикой, например, <p> — параграф, <table> — таблица, <ol>, <ul> — списки. Но этими тегами не получится разметить «шапку», «подвал», «боковую панель» сайта.

Раньше для этого использовали классы или идентификаторы, например так:

<div id="header">
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню.
</div>

<div id="main">
  // Уникальный контент сайта
</div>

<div id="footer">
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</div>

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

Основными семантическими тегами стали:

  • <article>
  • <aside>
  • <footer>
  • <header>
  • <main>
  • <nav>
  • <section>

Большинство элементов интуитивно понятны и их можно сразу использовать в своих документах. Теперь пример выше можно переделать с использованием новых элементов HTML:

<header>
  // Здесь будет шапка сайта. Обычно в ней располагается логотип, контактная информация, меню.
</header>

<main>
  // Уникальный контент сайта
</main>

<footer>
  // Подвал сайта. Обычно здесь находится контактная информация, дополнительное меню, юридическая информация о компании
</footer>

Задание

Создайте разметку «шапки» и «подвала», используя новые семантические элементы HTML5

36. Шапка 

HTML: Шапка

Шапкой на сайте традиционно принято называть верхнюю область, в которой чаще всего находятся контактные данные, меню, логотип. До появления стандарта HTML5 данную область просто размечали, используя обычный блок <div>, что не вносило «смысла».

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

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <div id="menu"> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </div>
</header>

Тег <header> по своему поведению не отличается от тега <div> и не содержит отличных стандартных стилей, поэтому его можно использовать на любом сайте, не боясь нарушить внешний вид сайта

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и маркированный список из двух ссылок

37. Меню 

HTML: Меню

В прошлом уроке в шапке сайта мы использовали просто список для обозначения меню. Чтобы дать возможность роботам и различным устройствам быстрее определить главное меню сайта, используется парный тег <nav>, внутри которого располагаются ссылки на страницы сайта. Также различные устройства для чтения с экрана, которыми пользуются люди со слабым зрением, используют этот тег, чтобы определить, стоит ли его отображать на странице.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

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

Задание

Создайте разметку «шапки» сайта. Расположите внутри картинку и меню из двух элементов. Используйте тег <nav> и маркированный список

38. Уникальный контент страницы

HTML: Уникальный контент страницы

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

Возьмём созданную нами шапку сайта и добавим к ней область с уникальным контентом:

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
  <!-- Основной контент страницы. Это может быть статья, описание услуги, данные на странице, контакты, форма заказа услуги -->
</main>

Страница должна иметь не более одного элемента <main> (это говорит о том, что в нём только уникальный контент)

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри неё вставьте произвольный контент.

39. Секция 

HTML: Секция

Основной контент страницы (внутри тега <main>) также может быть размечен с использованием множества различных тегов HTML5. Одним из таких тегов является <section>, позволяющий разметить небольшой участок контента, связанный по смыслу с основным содержанием. Например, мы хотим разметить форму заказа услуги. Такой контент напрямую связан с содержанием нашей страницы, но не может существовать без него. В таком случае его можно разметить с помощью тега <section>.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>

    <section class="callback-form">
        <h2>Оставить заявку</h2>
        <form>
            <!-- Здесь форма заказа услуги -->
        </form>
    </section>
</main>

Так как <section> является участком связанного между собой контента (раздел статьи, форма связи и т.д.), то зачастую внутри находится заголовок. Данное правило не является обязательным.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте две секции с заголовками в теге h2

40. Самостоятельная секция

HTML: Самостоятельная секция

Помимо тега <section>, для обозначения секции используется тег <article>. Он предназначается для разметки секции, которая может быть использована самостоятельно и не привязана структурно к конкретной странице. Например, блок с курсом валют, погода, превью новости или статьи. Данные блоки хоть и могут напрямую касаться текущей страницы, но они представляют собой самостоятельную единицу, которая не потеряет смысл, если взглянуть на неё отдельно от контекста.

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

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<main>
    <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>

    <section class="callback-form">
        <h2>Оставить заявку</h2>
        <form>
            <!-- Здесь форма заказа услуги -->
        </form>
    </section>

    <section class="more">
          <h2>Читайте также</h2>
          <article class="article-block">
              <h3>Услуга 2</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article class="article-block">
              <h3>Услуга 3</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article class="article-block">
              <h3>Услуга 4</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>
    </section>
</main>

Обратите внимание, что сами <article> мы обернули в <section>, так как эта секция напрямую связана с текущей страницей и показывает похожие услуги. А услуги размечены с помощью <article>. Они могут быть «выдернуты» из контекста, и всё равно будет понятно, что это описание конкретной услуги, которую мы предлагаем.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте секцию с заголовком в теге <h2> и два блока с описанием новых услуг. Не забудьте, что внутри тега <article> обязательно содержится заголовок. Сами заголовки внутри <article> разметьте тегом <h3>.

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

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

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

Для того, чтобы корректно разметить такую область, существует тег <aside>, внутри которого и располагается наша боковая панель. Добавим в пример из прошлого урока боковую панель с дополнительным меню.

<header>
    <img src="/logo.png" alt="Логотип"> <!-- Логотип сайта -->
    <nav> <!-- Меню -->
        <ul>
            <li><a href="/">Главная</a></li>
            <li><a href="/about">О нас</a></li>
            <li><a href="/contacts">Контакты</a></li>
        </ul>
    </nav>
</header>

<aside> <!-- Боковая панель (сайдбар) -->
    <nav> <!-- Дополнительное меню раздела -->
        <ul>
            <li><a href="/service-1/">Услуга 1</a></li>
            <li><a href="/service-2/">Услуга 2</a></li>
            <li><a href="/service-3/">Услуга 3</a></li>
        </ul>
    </nav>
</aside>

<main>
    <p>Основной контент страницы. Это может быть статья, описание услуги, данные на странице контакты</p>

    <section class="callback-form">
        <h2>Оставить заявку</h2>
        <form>
            <!-- Здесь форма заказа услуги -->
        </form>
    </section>

    <section class="more">
          <h2>Читайте также</h2>
          <article class="article-block">
              <h3>Услуга 2</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article class="article-block">
              <h3>Услуга 3</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>

          <article class="article-block">
              <h3>Услуга 4</h3>
              <p>Описание новой услуги</p>
              <a href="#">Ссылка на услугу</a>
          </article>
    </section>
</main>

Обратите внимание, что <aside> содержится вне тега <main>. Этот контент не обязан быть уникальным на каждой странице. Он может быть уникальным для каждого конкретного раздела (если речь идёт, например, о меню). Если боковая панель уникальна для каждой страницы, то она должна быть расположена внутри тега <main>.

Задание

Создайте шапку сайта. Она состоит из 2-х элементов:
* Логотип
* Секция навигации. Внутри неё маркированный список из двух элементов

Добавьте секцию <main>. Внутри создайте секцию с заголовком в теге <h2> и два блока с описанием новых услуг. Не забудьте, что внутри тега <article> обязательно содержится заголовок. Сами заголовки внутри <article> разметьте тегом <h3>.

Добавьте боковую панель. Она является уникальной для каждой страницы и содержит текст, относящийся только к этой странице. Внутри панели вставьте произвольный текст.

Серия публикаций:

Программирование и веб-разработка

Добавить комментарий

Авторизация
*
*
Регистрация
*
*
*
*
Открытый профиль общедоступен. (это не распространяется на вкладки вашего личного кабинета). Закрытый профиль закрывает все возможности найти или увидеть ваш личный кабинет посторонним. В любой момент, вы сможете изменить этот параметр в настройках личного кабинета.
Генерация пароля
логотип
Рекомендуем

Total Flow

Рекомендуем

Все самое интересное (Статьи)

Рекомендуем

Все самое вкусное (Рецепты)