Как создать веб страницу или что такое HTML?
Здравствуйте, уважаемые читатели. В этой статье вы научитесь создавать веб страницу, используя обычный Блокнот, встроенный в операционную систему Windows. А так же узнаете, что такое язык HTML, что такое тег, рассмотрим структуру веб страницы и многое другое.
Итак, сначала немного теории.
Что такое HTML
HTML (HyperText Markup Language) - это язык гипертекстовой разметки. Первая версия языка HTML появилась в 1992 году, а в настоящее время используется уже 5 версия этого языка - HTML5. Html-документ состоит из набора тегов и их атрибутов. Набор тегов создает иерархическое дерево
Для отображения веб-страниц написанных на языке html обычно используются браузеры - специальные программы для просмотра интернет страничек. Браузер получает от веб-сервера html код документа и переводит его в понятный для пользователя вид.
Что такое html тег
Тег - это элемент html-кода, представляет из себя слово заключенное в угловые скобки <>. Слово, которое идет сразу после открывающей скобки - название тега. Примеры html тегов: <body>, <div>, <h1>, <p> и другие.
Теги бывают одинарные и парные.
Пример одинарного тега: <img src="image.jpg">.
Пример парного тега: <h1>Что такое html</h1>.
Теги могут содержать атрибуты. Пример тега с атрибутом: <h1 align="center">. Здесь атрибут это align="center". Слово перед знаком "=" название атрибута, слово после знака "=" значение атрибута. Атрибуты бывают обязательные и не обязательные.
Теги можно вкладывать друг в друга, например:
<div>
<h1>Что такое html</h1>
<img src="image.jpg">
</div>
Структура web-страницы и основные HTML теги.
Чтобы веб-страница корректно отображалась в браузере, в html-коде обязательно наличие следующих парных тегов: html, head и body. Весь html-код страницы размещается между тегами <html> и </html>.
Также html-код разделяется на разделы заголовка и тела документа.
Раздел заголовка документа размещается между тегами <head> и </head>, и содержит служебные теги не отображаемые браузером. Например раздел заголовка может быть таким:
<head>
<title>Как создать веб-страницу</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" href="style.min.css" type="text/css">
</head>
Раздел тела документа размещается между тегами <body> и </body>, и содержит код, который будет отображаться в браузере.
Полностью веб-страница имеет следующую структуру:
<html>
<head>
<title>Как создать веб-страницу</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!-- и другие служебные теги -->
</head>
<body>
<h1>Как создать веб-страницу?</h1>
<p>Веб страницу можно создать с помощью программы Блокнот!</p>
<!-- и другие теги -->
</body>
</html>
Тег doctype - тип документа
Последнее, что осталось рассмотреть перед созданием веб-страницы, это тег doctype. Этот тег всегда располагается в самом начале документа и указывает версию языка на котором написана html страница. Тег doctype нужен, чтобы браузер понимал согласно какому стандарту отображать веб-страницу. Существует несколько видов тег doctype, но в настоящее время практически все веб-страницы начинаются с тега <!DOCTYPE html>, что означает использование языка html 5-ой версии.
А далее перейдем к практике.
Как создать html документ в "Блокноте"
1. Откройте меню "Пуск" щелкнув по значку 
в левом нижнем углу рабочего стола Windows.
2. Найдите "Блокнот" в открывшемся меню и щелкните по нему.
3. Откройте меню "Файл" в верхнем левом углу окна "Блокнота".
4. Нажмите пункт меню "Сохранить как...".
5. В открывшемся окне "Сохранение" раскройте меню "Тип файла" и выберите в нем опцию "Все файлы".
6. Выберите папку для сохранения и в поле "Имя файла" введите название файла и расширение "html", например "firstpage.html".
7. Нажмите кнопку "Сохранить". Текстовый документ сохранится как html-документ.
8. Далее пишем html-код страницы. Первый тег, который необходимо добавить в "Блокнот", - <!DOCTYPE html>:
9. Создаем структуру веб-страницы. Добавляем теги <html> и </html>. Между ними добавляем теги <head></head> и <body></body>. Должно получиться примерно так:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
10. Далее добавим имя страницы. Имя страницы задается между тегами <title> и </title>, которые должны размещаться между тегами <head> и </head>. Имя страницы отображается на вкладке браузера. Допустим, наша страница будет называться "Моя первая веб-страничка". Тогда между тегами <head> и </head> добавим следующий код:
<title>Моя первая веб-страничка</title>
И сохраним веб-страничку нажав CTRL+S.
11. Далее между тегами <body> и </body> размещаем содержимое нашей странички, которое будет отображаться в браузере.
12. Добавим заголовок на нашу страницу. Заголовок можно добавить с помощью тегов <h1> и <h1>. Все существует шесть видов заголовков, различающихся по размеру: от <h1> до <h6>. h1 - самый большой заголовок, h6 - самы маленький.
Добавим на страницу заголовок "Моя первая веб-страница": <h1>Моя первая веб-страница</h1>:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страничка</title>
</head>
<body>
<h1>Моя первая веб-страница</h1>
</body>
</html>
13. Добавляем текст на страницу. Текст обычно размещается между тегами абзаца <p> и </p>. Добавьте после тега </h> следующий код:
<p>Добро пожаловать на мою первую веб-страницу!</p>
14. Форматирование текста. С помощью тегов <b>, <i>, <u>, <strike>, <small> можно сделать текст полужирным, наклонным, подчеркнутым, перечеркнутым или маленьким соответственно. А с помощью одиночного тега <br> можно задать перенос строк. Добавим на нашу страничку абзац с различным отображением текста:
<p>
<b>Это полужирный текст</b><br>
<i>Это наклонный шрифт</i><br>
<u>Этот текст подчеркнут</u>, <strike>а этот перечеркнут</strike><br>
<small>А здесь надпись мелким шрифтом</small>
<p>
Полностью код документа должен выглядеть так:
<!DOCTYPE html>
<html>
<head>
<title>Моя первая веб-страничка</title>
</head>
<body>
<h1>Моя первая веб-страница</h1>
<p>Добро пожаловать на мою первую веб-страницу!</p>
<p>
<b>Это полужирный текст</b><br>
<i>Это наклонный шрифт</i><br>
<u>Этот текст подчеркнут</u>,
<strike>а этот перечеркнут</strike><br>
<small>А здесь надпись мелким шрифтом</small>
<p>
</body>
</html>
Или так это выглядит в "Блокноте":
Сохраните страничку с помощью клавиш CTRL+S.
15. Чтобы открыть страницу в браузере обычно достаточно щелкнуть дважды по сохраненному файлу. Если после двойного щелчка файл не откроется в браузере, то щелкните по файлу правой клавишей мыши, в открывшемся контекстном меню навести курсор на "Открыть с помощью" и щелкнуть по браузеру:
Примерно так наша страничка будет выглядеть в браузере:
Таким образом, наша первая веб-страница создана. В итоге мы научились создавать простейшие html-страницы и узнали, что такое html.
Для создания более сложных страниц необходимо изучать дополнительные html-теги, которых достаточно большое количество. А для оформления страниц потребуется изучить язык CSS. И в дальнейшем при создании веб-страниц лучше использовать более продвинутый текстовый редактор с подсветкой синтаксиса и другими возможностями, например Visual Studio Code или Sublime Text.
