Приветствую, это 3 урок, именно с него происходит разделения ряда уроков, теперь мы забываем про CSS и приступаем к изучению базы html.
В прошлом уроке мы успешно создали рабочее пространство и перенесли его в редактор кода(текстовый редактор), теперь необходимо открыть в нашей программе файл index.html, перед вами должна появиться следующая картина:
На данный момент у нас пустая страница, но при этом, она все равно существует, для удобной работы необходимо открыть файл в браузере, для этого зайдите в папку с файлом index.html и откройте его(нажатием мыши или через ПКМ), вы должны увидеть следующее:
Перейдем обратно в редактор, ну и начнем разработку html части сайта, многие курсы часто прибегают к быстрой печати кода, но я не из этого ряда, а новичкам тем более не советую пользоваться быстрой печатью, потому что при ручном написание кода в вашей голове усвоение будет происходить намного быстрее, чем вы будете создавать структуру сайта по одному "!" знаку, но выбор остается за вами!
Первый и самый главный ТЕГ во всей иерархии html тегов является:
<html></html>
Внутри него располагают все ТЕГи, тут же я расскажу вам про первый вид ТЕГов, двойной, двойные ТЕГи повторяются 2 раза и отличаются лишь знаком "/" в начале второго(последнего)ТЕГа, они не могут закрыть сами себя, таких ТЕГов мы встретим еще огромное количество.
Но что же добавляют в ТЕГ html? У html есть обязательные ТЕГи, head и body.
ТЕГ head - данный ТЕГ хранит в себе всю системную информацию сайта, которая не видна обычному юзеру(кроме названия вкладки страницы, иконки вкладки), в нем подключают css и js, добавляют мета-данные, название вкладки, иконку вкладки и прочее. Этот ТЕГ тоже является двойным, прописывает он так:
<html> <!-- То что мы уже изучили -->
<head>
<!-- Здесь и хранятся все данные сайта -->
</head>
</html> <!-- То что мы уже изучили -->
Приступим к третьем ТЕГу body, данный ТЕГ, противоположно head, хранит в себе только ту информацию, которую видит каждый посетитель сайта, это текст, картинки, кнопки, таблицы, поля для текста и прочее. Этот ТЕГ является двойным и выглядит в коде так:
<html> <!-- То что мы уже изучили -->
<head> <!-- То что мы уже изучили -->
</head> <!-- То что мы уже изучили -->
<body>
<!-- Именно тут и находятся все материала для обычных посетителей -->
</body>
</html> <!-- То что мы уже изучили -->
Вот мы(сами)прописали весь фундамент любого сайта на языке разметки html, но, для того, чтобы браузер четко понимал(ну и другие разработчики)на какой версии html написан сайт необходимо в самом верху прописать структуру версии html 5, она выглядит так:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Совет: желательно создать txt файл где вам удобно для того, чтобы записывать в него все новые ТЕГи, атрибуты, значения(именно по html).
Краткое повторение:
"ТЕГ html" - данный ТЕГ является главным в иерархии ЯР html, в него входят все ТЕГи, он является двойным и в коде появляется 2 раза.
"Двойные ТЕГи" - такими называют ТЕГи, которые закрываются с помощью такого же ТЕГа со знаком "/" после "<".
"ТЕГ head" - данный ТЕГ хранит в себе всю системную информацию, которая не показывается пользователям на сайте, исключениями являются: название вкладки браузера, иконка вкладки браузера, кроме перечисленных раннее в нем присутствуют мета-данные, кодировка, ссылки для подключения сторонних файлов и прочее.
"ТЕГ body" - данный ТЕГ хранит в себе всю информацию, которую видет пользователь на странице, это изображения, текст, таблицы, кнопки и поля для текста, данный ТЕГ является двойным.
"Структура html5" - для корректной работы браузера необходимо в самом вверху прописать структуру Doctype, выглядит она так: <!DOCTYPE html> .
// В следующем уроке:
Изучим состав ТЕГа head.
В прошлом уроке мы успешно создали рабочее пространство и перенесли его в редактор кода(текстовый редактор), теперь необходимо открыть в нашей программе файл index.html, перед вами должна появиться следующая картина:
Первый и самый главный ТЕГ во всей иерархии html тегов является:
<html></html>
Внутри него располагают все ТЕГи, тут же я расскажу вам про первый вид ТЕГов, двойной, двойные ТЕГи повторяются 2 раза и отличаются лишь знаком "/" в начале второго(последнего)ТЕГа, они не могут закрыть сами себя, таких ТЕГов мы встретим еще огромное количество.
Но что же добавляют в ТЕГ html? У html есть обязательные ТЕГи, head и body.
ТЕГ head - данный ТЕГ хранит в себе всю системную информацию сайта, которая не видна обычному юзеру(кроме названия вкладки страницы, иконки вкладки), в нем подключают css и js, добавляют мета-данные, название вкладки, иконку вкладки и прочее. Этот ТЕГ тоже является двойным, прописывает он так:
<html> <!-- То что мы уже изучили -->
<head>
<!-- Здесь и хранятся все данные сайта -->
</head>
</html> <!-- То что мы уже изучили -->
Приступим к третьем ТЕГу body, данный ТЕГ, противоположно head, хранит в себе только ту информацию, которую видит каждый посетитель сайта, это текст, картинки, кнопки, таблицы, поля для текста и прочее. Этот ТЕГ является двойным и выглядит в коде так:
<html> <!-- То что мы уже изучили -->
<head> <!-- То что мы уже изучили -->
</head> <!-- То что мы уже изучили -->
<body>
<!-- Именно тут и находятся все материала для обычных посетителей -->
</body>
</html> <!-- То что мы уже изучили -->
Вот мы(сами)прописали весь фундамент любого сайта на языке разметки html, но, для того, чтобы браузер четко понимал(ну и другие разработчики)на какой версии html написан сайт необходимо в самом верху прописать структуру версии html 5, она выглядит так:
Наш урок подходит к концу, в нем мы изучили фундаментальную структуру сайта на ЯР HTML5, в вашем редакторе должно появиться следующий код:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</html>
Совет: желательно создать txt файл где вам удобно для того, чтобы записывать в него все новые ТЕГи, атрибуты, значения(именно по html).
Краткое повторение:
"ТЕГ html" - данный ТЕГ является главным в иерархии ЯР html, в него входят все ТЕГи, он является двойным и в коде появляется 2 раза.
"Двойные ТЕГи" - такими называют ТЕГи, которые закрываются с помощью такого же ТЕГа со знаком "/" после "<".
"ТЕГ head" - данный ТЕГ хранит в себе всю системную информацию, которая не показывается пользователям на сайте, исключениями являются: название вкладки браузера, иконка вкладки браузера, кроме перечисленных раннее в нем присутствуют мета-данные, кодировка, ссылки для подключения сторонних файлов и прочее.
"ТЕГ body" - данный ТЕГ хранит в себе всю информацию, которую видет пользователь на странице, это изображения, текст, таблицы, кнопки и поля для текста, данный ТЕГ является двойным.
"Структура html5" - для корректной работы браузера необходимо в самом вверху прописать структуру Doctype, выглядит она так: <!DOCTYPE html> .
// В следующем уроке:
Изучим состав ТЕГа head.
Вложения
-
Снимок.PNG