Основы работы с HTML-элементами

Development | Amber | Комментировать запись

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

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

Примечание: Найти все мануалы этой серии можно по тегу html-practice.

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

Ниже мы обозначили каждую из частей элемента HTML:

↓      Элемент HTML     ↓
<p>Это простой пример.</p> ← Закрывающий тег
↑  ↑   Содержимое    ↑
└——— Открывающий тег

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

<strong>Важный текст</strong>

В этом примере тег <strong> добавляет строгое форматирование, заключая текст в пару открывающих и закрывающих тегов <strong>. Обратите внимание, что закрывающие теги всегда обозначаются косой чертой (/).

Примечание: Вы увидите, что тег <strong> действует очень похоже на выделение текста полужирным. Вы можете добиться подобного визуального эффекта, используя тег <b>; тег <strong> тоже выделяет текст , но также он семантически указывает, что текст имеет большое значение. Если вы используете полужирный стиль, потому что хотите отметить важность текста, обязательно используйте тег <strong>, который сообщит программам чтения с экрана о важности выделенного фрагмента.

Точно так же работают теги <i> и <em>. Тег <em> добавляет курсив и семантическое значение, а тег <i> – только курсив. Если вы используете курсив, чтобы выделить важность текста, вам нужен тег <em>.

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

Просмотр оффлайн HTML-файла в браузере

Вы можете просмотреть в браузере HTML-файл, которого нет в сети, несколькими способами:

1. Перетащите файл в свой браузер.
2. Нажмите CTRL + левую (на Mac) или правую (на Windows) кнопку мыши, чтобы открыть файл в браузере.
3. Скопируйте полный путь к файлу и вставьте его в панель браузера.

Если вы используете текстовый редактор Visual Studio Code, вы можете скопировать путь к файлу, нажав CTRL и кликнув по файлу index.html левой (на Mac) или правой (на Windows) кнопку мыши. Затем выберите Copy Path и вставьте путь в свой веб-браузер.