HTML (HyperText Markup Language — «язык гипертекстовой разметки») — это специальный код, который определяет содержание и структуру веб-страницы.
Код HTML обрабатывается (интерпретируется) браузерами, и полученная в результате интерпретации страница отображается на экране монитора компьютера, или мобильного устройства.
То есть можно сказать, что благодаря HTML мы видим в окне браузера ту, или иную информацию: гиперссылки, блоки, таблицы, картинки, видео и прочее.
Рисунок 1.1. Пример HTML разметки
HTML-документ — это обычный текстовый документ. Он может быть создан в любом текстовом редакторе, например в Блокноте. Но как правило, опытные специалисты, при создании сайтов используют специализированные редакторы с подсветкой кода: Notepad++, Visual Studio Code, Adobe Dreamweaver и т.п.
HTML-документ имеет расширение .html.
Рисунок 1.2. Файл с расширением .html
Содержание веб-страницы называют контентом. Это могут быть статьи, таблицы, картинки, видео и пр. То есть, все что содержит в себе информацию на сайте — это контент сайта.
Рисунок 1.3. Контент на сайте www.dnikweb.blogspot.com
Следует помнить!
HTML не является языком программирования. Это язык разметки. Благодаря этой разметке браузер понимает, как и где нужно выводить заданную вами информацию.
Чтобы заинтересовать вас с первых минут изучения этой книги – давайте выполним небольшое практическое задание.
Практическое задание №1
В архиве с примерами в папке exemple001 находится файл index.html.
Если вы сейчас дважды кликните левой кнопкой мыши по этому файлу, то он будет открыт браузером, который вы используете по умолчанию.
В окне браузера вы увидите текст «Мой первый HTML документ», а открытая вкладка будет иметь заголовок «Пример HTML разметки».
Рисунок 1.4. HTML-файл для выполнения практического задания
Давайте сделаем так, чтобы в окне браузера вместо текста «Мой первый HTML документ» было приветствие с вашим именем. Например, отобразим приветствие «Здравствуйте Иван. Вы уже начали осваивать HTML». И поменяем заголовок HTML документа с текста «Пример HTML разметки» на «Мой HTML документ».
Для этого нам нужно открыть файл index.html не в браузере, а текстовым редактором (Например, Блокнотом).
Шаг 1. Запускаем приложение Блокнот
Рисунок 1.5. Запуск приложения Блокнот
Шаг 2. В меню Файл выбираем пункт Открыть (или используем сочетание клавиш Ctrl+O)
Рисунок 1.6. Как открыть HTML-документ программой Блокнот
Шаг 3. В появившемся окне меняем тип файла на Все файлы (*.*). И только после этого находим наш файл index.html и открываем его.
Рисунок 1.7. Как открыть HTML-документ программой Блокнот
Шаг 4. Если вы все сделали правильно, то в текстовом редакторе Блокнот вы увидите код HTML. Этот код и отвечает за вывод содержимого в браузере.
Рисунок 1.8. Исходный код HTML-документа
Шаг 5. Каждый элемент этого кода мы рассмотрим немного позже. А пока давайте просто изменим текст между <title> и </title> на Мой HTML документ и между <body> и </body> на Здравствуйте Иван. Вы уже начали осваивать HTML.
В итоге у вас должен получиться следующий код:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Мой HTML документ</title>
</head>
<body>
Здравствуйте Иван. Вы уже начали осваивать HTML
</body>
</html>
Шаг 6. Сохраните этот документ нажав клавиши Ctrl+S, или выбрав в меню Файл пункт Сохранить
Рисунок 1.9. Как сохранить HTML-документ
Теперь, если вы откроете файл index.html в браузере (дважды кликнув по нему левой клавишей мыши), то в появившемся окне увидите надпись «Здравствуйте Иван. Вы уже начали осваивать HTML», а заголовок HTML документа будет «Мой HTML документ».
Рисунок 1.10. Наш HTML-документ с внесенными изменениями
Примечание.
HTML-документ можно открыть для редактирования и другим способом.
Для этого нужно:
- Кликнуть правой кнопкой мыши по файлу index.html;
- В появившемся контекстном меню выбрать пункт «Открыть с помощью»;
- И в появившемся списке выбрать приложение Блокнот.
Если приложения Блокнот в списке нет, то нажмите «Выбрать другое приложение» как показано на рисунке.
Рисунок 1.11. Как открыть HTML-документ для редактирования кода
Как видите нам понадобилось всего лишь 10 строк кода, чтобы сформировать свой первый HTML-документ и вывести на экран определённую информацию. При чем использовали мы для этого обычный текстовый редактор Блокнот.
Но если вы хотите серьёзно заняться веб-разработкой, то без специализированных программ вам не обойтись. Поэтому в следующей теме мы рассмотрим самые лучшие, по моему мнению, редакторы исходного кода. Вам нужно будет выбрать один из них и установить на свой компьютер.
Использование редактора с подсветкой синтаксиса значительно облегчает написание HTML кода и редактирование уже существующих HTML-документов.
После этого мы изучим структуру HTML-документа и узнаем, что же это за команды (инструкции) были написаны в файле index.html из нашего практического задания.
А пока, если вам всё еще не понятно, как выполнять практическое задние №1, вы можете перейти на мой YouTube канал и посмотреть этот видеоурок там.
