Большая Энциклопедия HTML #1. Основы HTML

HTML (HyperText Markup Language — «язык гипертекстовой разметки») — это специальный код, который определяет содержание и структуру веб-страницы.

Код HTML обрабатывается (интерпретируется) браузерами, и полученная в результате интерпретации страница отображается на экране монитора компьютера, или мобильного устройства.

То есть можно сказать, что благодаря HTML мы видим в окне браузера ту, или иную информацию: гиперссылки, блоки, таблицы, картинки, видео и прочее.

Основы HTML

Рисунок 1.1. Пример HTML разметки

HTML-документ — это обычный текстовый документ. Он может быть создан в любом текстовом редакторе, например в Блокноте. Но как правило, опытные специалисты, при создании сайтов используют специализированные редакторы с подсветкой кода: Notepad++, Visual Studio Code, Adobe Dreamweaver и т.п.

HTML-документ имеет расширение .html.

Основы HTML

Рисунок 1.2. Файл с расширением .html

Содержание веб-страницы называют контентом. Это могут быть статьи, таблицы, картинки, видео и пр. То есть, все что содержит в себе информацию на сайте — это контент сайта.

Контент на сайте

Рисунок 1.3. Контент на сайте www.dnikweb.blogspot.com

Следует помнить!

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

Чтобы заинтересовать вас с первых минут изучения этой книги – давайте выполним небольшое практическое задание.

Практическое задание №1

В архиве с примерами в папке exemple001 находится файл index.html.

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

В окне браузера вы увидите текст «Мой первый 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 документ».

Основы HTML

Рисунок 1.10. Наш HTML-документ с внесенными изменениями

Примечание.

HTML-документ можно открыть для редактирования и другим способом.

Для этого нужно:

  1. Кликнуть правой кнопкой мыши по файлу index.html;
  2. В появившемся контекстном меню выбрать пункт «Открыть с помощью»;
  3. И в появившемся списке выбрать приложение Блокнот.

Если приложения Блокнот в списке нет, то нажмите «Выбрать другое приложение» как показано на рисунке.

Как открыть HTML

Рисунок 1.11. Как открыть HTML-документ для редактирования кода

Как видите нам понадобилось всего лишь 10 строк кода, чтобы сформировать свой первый HTML-документ и вывести на экран определённую информацию. При чем использовали мы для этого обычный текстовый редактор Блокнот.

Но если вы хотите серьёзно заняться веб-разработкой, то без специализированных программ вам не обойтись. Поэтому в следующей теме мы рассмотрим самые лучшие, по моему мнению, редакторы исходного кода. Вам нужно будет выбрать один из них и установить на свой компьютер.

Использование редактора с подсветкой синтаксиса значительно облегчает написание HTML кода и редактирование уже существующих HTML-документов.

После этого мы изучим структуру HTML-документа и узнаем, что же это за команды (инструкции) были написаны в файле index.html из нашего практического задания.

А пока, если вам всё еще не понятно, как выполнять практическое задние №1, вы можете перейти на мой YouTube канал и посмотреть этот видеоурок там.

АВТОРИЗАЦИЯ