Эта серия мануалов поможет вам создать и настроить веб-сайт с помощью 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-файл, которого нет в сети, несколькими способами:
- Перетащите файл в свой браузер.
- Нажмите CTRL + левую (на Mac) или правую (на Windows) кнопку мыши, чтобы открыть файл в браузере.
- Скопируйте полный путь к файлу и вставьте его в панель браузера.
Если вы используете текстовый редактор Visual Studio Code, вы можете скопировать путь к файлу, нажав CTRL и кликнув по файлу index.html левой (на Mac) или правой (на Windows) кнопку мыши. Затем выберите Copy Path и вставьте путь в свой веб-браузер.