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

Что ж, давайте начнем с создания вашей первой HTML-страницы.

Создание вашего первого HTML-документа

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

Шаг 1: Создание файла HTML

Откройте текстовый редактор вашего компьютера и создайте новый файл.

Мы предлагаем вам использовать Блокнот (в Windows), TextEdit (в Mac) или другой простой текстовый редактор для этого; не используйте Word или WordPad! Как только вы поймете основные принципы, вы можете переключиться на более продвинутые инструменты, которые мы рассматривали в статье Как выбрать текстовый редактор.

Шаг 2. Введите код HTML

Начните с пустого окна и введите следующий код:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>A simple HTML document</title>
</head>
<body>
    <p>Hello World!<p>
</body>
</html>

Шаг 3: Сохранение файла

Теперь сохраните файл на рабочем столе как myfirstpage.html.

Важно, чтобы было указано расширение .html — некоторые текстовые редакторы, такие как блокнот автоматически сохранят его с расширением .txt.

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

Разберем подробнее код, который мы написали выше.

  • В первой строке <!DOCTYPE html> — это объявление типа документа. Строка сообщает веб-браузеру, что этот документ является документом HTML5.
  • Элемент <head> является контейнером для тегов, который предоставляет информацию о документе, например, тег <title> определяет заголовок документа.
  • Элемент <body> содержит фактическое содержимое документа (абзацы, ссылки, изображения, таблицы и т. д.), которое отображается в веб-браузере и отображается для пользователя.

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

Объявление DOCTYPE появляется вверху веб-страницы перед всеми другими элементами; однако само объявление doctype не является HTML-тегом. Каждый HTML-документ требует декларации типа документа, чтобы гарантировать, что ваши страницы отобразятся правильно.

Теги <html>, <head>, и <body> составляют основной каркас каждой веб-страницы. Содержимое внутри <head> и </head> невидимо для пользователей, за одним исключением: текст между тегами <title> и </title>, который отображается в виде заголовка на вкладке браузера.

HTML-теги и элементы

HTML-документ может и должен содержать HTML-элементы, которые называют теги или разметка. Эти теги разметки являются фундаментальной характеристикой HTML. Каждый тег разметки состоит из ключевого слова, заключенного в угловые скобки, например <html>, <head>, <body>, <title>, <p> и т.д.

Обычно HTML-теги идут парами, такими как <html> и </html>. Первый тег в паре часто называют открывающим тегом (или начальным тегом), а второй тег называется закрывающим тегом (или конечным тегом).

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

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

<p>Это абзац.</p>
<!-- Абзац с вложенным элементом -->
<p>
    Это <b>другой</b> абзац.
</p>

Вы узнаете о различных HTML-элементах в следующем разделе.

Похожие посты

Руководство по тегам и элементам в HTML

HTML-элемент — это отдельный компонент документа HTML. Он представляет собой семантику или некоторое значение. Например, элемент <title> представляет заголовок документа. Большинство элементов HTML пишутся с начальным тегом (или открывающим) и конечным тегом (или закрывающим) с содержимым между ними. Элементы могут также содержать атрибуты, которые определяют его дополнительные свойства. Например, абзац, который представлен элементом <p>, будет…

Руководство по заголовкам в HTML

Заголовки помогают определить иерархию и структуру содержимого веб-страницы. В HTML есть шесть уровней заголовков, от <h1> до <h6>; чем выше уровень заголовка, тем больше его важность — поэтому тег <h1> определяет самый важный заголовок, а тег <h6> определяет наименее важный заголовок в документе. По умолчанию браузеры отображают заголовки более крупным и жирным шрифтом, чем обычный…

Руководство по мета-тегам в HTML

Теги <meta> обычно используются для предоставления структурированных метаданных, таких как ключевые слова (keywords), описание (description), имя автора (author name), кодировка символов (character encoding) и т.д. В теге <head> может быть размещено любое количество метатегов <meta>. Метаданные не будут отображаться на веб-странице, но будут обрабатываться поисковиками, браузерами и другими веб-сервисами. Теперь рассмотрим использование мета-тегов. Объявление кодировки…

Насколько публикация полезна?

Нажмите на звезду, чтобы оценить!

Средняя оценка 5 / 5. Количество оценок: 1

Оценок пока нет. Поставьте оценку первым.