В этом уроке вы узнаете, как просто создать 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-элементах в следующем разделе.
