Справочник для бабули

Термины

Базовая структура HTML-документа

HTML-документ состоит из следующих основных частей:

Пример структуры

  <!DOCTYPE html>
  <html>
    <head>
    <title>Заголовок страницы</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="/css/style.css">
    </head>
    <body>
    <h1>Заголовок страницы</h1>
    <p>Это пример базовой структуры HTML-документа.</p>
    </body>
  </html>

Этот пример демонстрирует, как правильно структурировать HTML-документ.

Заголовки

Заголовки используются для организации контента и имеют уровни от 1 до 6:

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

  
<h1>Основной заголовок</h1>

  
<h2>Подзаголовок первого уровня</h2>

  
<h3>Подзаголовок второго уровня</h3>

  
<h4>Подзаголовок третьего уровня</h4>

  
<h5>Подзаголовок четвертого уровня</h5>

  
<h6>Подзаголовок пятого уровня</h6>

Использование заголовков помогает структурировать текст и улучшает восприятие информации.

Параграфы

Параграфы используются для разделения текста на логические блоки. Они создаются с помощью тега <p>.

Пример параграфа:

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

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

Списки

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

Неупорядоченные списки

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

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

Пример неупорядоченного списка:

Упорядоченные списки

Упорядоченные списки создаются с помощью тега <ol> и также содержат элементы списка в тегах <li>. 

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

Пример упорядоченного списка:

  1. Первый элемент
  2. Второй элемент
  3. Третий элемент

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

Пример ссылки:

  <a href="https://example.com">Перейти на Example.com</a>

Этот код создаст ссылку на Example.com. При нажатии на нее пользователь будет перенаправлен на указанный адрес.

Пример ссылки:

Перейти на Example.com

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

Якорные ссылки позволяют перейти к определенному разделу на странице. Для этого используется атрибут href с символом #, указывающим на идентификатор элемента.

Пример якорной ссылки:

  <a href="#section1">Перейти к разделу 1</a>

Этот код создаст ссылку, которая при нажатии перенаправит пользователя к разделу с идентификатором section1.

Пример якорной ссылки:

Перейти к разделу 1

Чтобы создать якорную ссылку, нужно добавить идентификатор к элементу, к которому вы хотите перейти. Например: 

  <h2 id="section1">Раздел 1</h2>
  <p>Это содержимое раздела 1.</p>

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

Раздел 1

Это содержимое раздела 1.

target attrubut

Атрибут target используется для указания, как открывать ссылки. Например, target="_blank" открывает ссылку в новой вкладке.

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

  <a href="https://example.com" target="_blank">Открыть Example.com в новой вкладке</a>

Этот код создаст ссылку, которая при нажатии откроет Example.com в новой вкладке браузера.

Пример ссылки с атрибутом target:

Открыть Example.com в новой вкладке

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

Изображения

Изображения добавляются с помощью тега <img>. Этот тег не имеет закрывающего тега и содержит атрибут src, указывающий путь к изображению.

Пример добавления изображения:

  <img src="path/to/image.jpg" >

Этот код вставит изображение на страницу.

Пример изображения:

Пример изображения

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

Теги стилизвции текста

Для стилизации текста используются следующие теги:

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

  <strong>Жирный текст</strong>
  <em>Курсивный текст</em>
  <u>Подчеркнутый текст</u>
  <mark>Выделенный текст</mark>
  <small>Маленький текст</small>
  <del>Зачеркнутый текст</del>
  <ins>Добавленный текст</ins>

Примеры стилизованного текста:

Жирный текст
Курсивный текст
Подчеркнутый текст
Выделенный текст
Маленький текст
Зачеркнутый текст
Добавленный текст

Эти теги помогают выделить важные части текста и сделать его более читаемым.

Таблицы

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

Пример таблицы:

  <table>
    <thead>
    <tr>
      <th>Заголовок 1</th>
      <th>Заголовок 2</th>
    </tr>
    </thead>
    <tbody>
    <tr>
      <td>Данные 1</td>
      <td>Данные 2</td>
    </tr>
    <tr>  
      <td>Данные 3</td>
      <td>Данные 4</td>
    </tr>
    </tbody>
  </table>

Этот код создаст таблицу с двумя заголовками и двумя строками данных.

Заголовок 1 Заголовок 2
Данные 1 Данные 2
Данные 3 Данные 4

Таблицы помогают организовать данные и сделать их более понятными для восприятия.

Медиа

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

Видео

Видео добавляется с помощью тега <video>, который может содержать атрибуты controls, autoplay, loop и muted.

Пример видео:

  <video controls width="600">
    <source src="path/to/video.mp4" type="video/mp4">
    Ваш браузер не поддерживает видео.
  </video>

Этот код вставит видео с элементами управления. Атрибут width задает ширину видео.

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

Аудио

Аудио добавляется с помощью тега <audio>, который также может содержать атрибуты controls, autoplay, loop и muted.

Пример аудио:

  <audio controls>
    <source src="path/to/audio.mp3" type="audio/mpeg">
    Ваш браузер не поддерживает аудио.
  </audio>

Этот код вставит аудио с элементами управления. Пользователи смогут воспроизводить, приостанавливать и регулировать громкость аудио.

Аудио позволяет пользователям прослушивать звуковой контент прямо на странице.

Атрибуты

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

Пример атрибута:

  <a href="https://example.com" target="_blank">Ссылка</a>

Этот код создает ссылку с атрибутом href, указывающим адрес ссылки, и атрибутом target, который открывает ссылку в новой вкладке.

Некоторые распространенные атрибуты:

Атрибуты позволяют настраивать поведение и внешний вид HTML-элементов.

Семантические теги

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

Некоторые распространенные семантические теги:

Пример использования семантических тегов:

  <header>
    <h1>Заголовок страницы</h1>
    <nav>
    <ul>
      <li><a href="#section1">Раздел 1</a></li>
      <li><a href="#section2">Раздел 2</a></li>
    </ul>
    </nav>
  </header>
  <main>
    <article>
    <h2>Статья 1</h2>
    <p>Это пример статьи.</p>
    </article>
    <section>
    <h2>Раздел 1</h2>
    <p>Это пример раздела.</p>
    </section>
    <aside>
    <p>Это боковая панель с дополнительной информацией.</p>
    </aside>
  </main>
  <footer>
    <p>© 2023 Ваш сайт. Все права защищены.</p>
  </footer>

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

Другие текстовые теги

Кнопки

Кнопки создаются с помощью тега <button>. Они могут выполнять различные действия — отправку формы, запуск скрипта и др.

Пример кнопки:

  <button>Нажми меня</button>

Пример с обработчиком события JavaScript:

  <button onclick="alert('Привет, бабуля!')">Поприветствовать</button>

Примеры кнопок:

Кнопки можно стилизовать с помощью CSS и назначать им любые действия через JavaScript.

Формы

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

Пример простой формы:

  <form action="/submit" method="post">
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name"><br>
    
    <label for="email">Email:</label>
    <input type="email" id="email" name="email"><br>
    
    <input type="submit" value="Отправить">
  </form>

Этот код создаёт форму с двумя полями и кнопкой отправки.

Пример формы:





Некоторые популярные элементы форм:

Пример с выпадающим списком и текстовой областью:

  <form>
    <label for="message">Сообщение:</label><br>
    <textarea id="message" name="message"></textarea><br>

    <label for="choice">Выберите:</label>
    <select id="choice" name="choice">
    <option value="1">Первый вариант</option>
    <option value="2">Второй вариант</option>
    </select><br>

    <button type="submit">Отправить</button>
  </form>

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