Введение в HTML.

Что такое HTML, CSS, JavaScript и вообще Фронтенд.


Введение в HTML. Введение в HTML. Что такое HTML, CSS, JavaScript и вообще Фронтенд. HTML - сокращение от английского HyperText Markup Language. По-русски: ГТРЯ - ГиперТекстовой Разметочный Язык. HTML вместе с CSS и JavaScript образуют Фронтенд (front-end). Фронтенд — клиентская сторона пользовательского интерфейса к программно-аппаратной части сервиса.


Главная О проекте Софт HTML Введение Курс 1 Справочник Карта сайта


Краткая история HTML.



В чем сила HTML5, брат?

Не только в правде. Также в том, что он исключительно простой, популярный и открытый. Теперь, когда WHATWG и W3C совместно продвигают один и тот же стандарт HTML (HTML5), можно уверено сказать: изучение этого стандарта сегодня просто, доступно и перспективно.

Технологии Фронтенд (Front-end) и Бакенд (Back-end).

К технологиям Фронтенд (клиентская часть сервиса) относятся HTML, CSS, JavaScript.

К технологиям Бакенд (серверная часть сервиса) разработки относятся PHP, Java, Python, Node.js и другие.
Полный Стек (FullStack) = Фронтенд + Бакенд
Фронтенд Бакенд
HTML
HTML
PHP
PHP
CSS
CSS
Java
Java
JavaScript
JavaScript
Python
Python
Node.js
Node.js
В общем случае Бакенд состоит из 2-х абстрактных сущностей:
Отметим еще, что если Бакендер (специалист по бакенду) может владеть только одной технологией (например, Питоном) и этим успешно жить, то Фронтендер должен, как правило, знать все 3 составляющих Фронтенда: HTML, CSS, JavaScript.

Кратко рассмотрим суть этих сущностей:
Пример 1. Чистый HTML.

Пример элемента HTML div в чистом, натуральном виде, без CSS и JavaScript

Я есть чистый элемент HTML div.

Такой вот чистый и конкретный элемент HTML div успешно живет, но визуально он как-то не очень воспринимается.

Пример 2. HTML+CSS.
А я есть элемент HTML div, к которому добавили некоторые свойства CSS. Именно поэтому я такой красивый и заметный.


Пример 3. HTML+CSS+JavaScript.
А надо мной можно немного поиздеваться с помощью JavaScript, используя кнопочки ниже...






Для лучшего понимания связки HTML+CSS+JS, давайте рассмотрим более яркий пример.

Чистый HTML код можно представить как скелет, череп. Чистый череп, без всяких излишеств.

Череп как символ чистого HTML
Череп как символ чистого HTML

В таком вот чистом виде HTML код не принято показывать конечному пользователю. Заказчик может не принять такую работу, хотя, возможно сам чистый HTML вполне работает и решает какие-то задачи.

Из эстетических соображений принято вот этот чистый HTML код как-то раскрашивать.

Вот тут-то на помощь и приходит технология CSS.

С помощью технологии CSS дизайнер раскрашивает голый череп HTML, делает его красивее до такой степени, что аж хочется потрогать.

Вот примерные действия HTML кодера и CSS дизайнера.

















В результате согласованных действий HTML кодер и CSS дизайнер получают примерно вот такой результат.

HTML+CSS. Красивее, чем чистый HTML.
HTML+CSS. Красивее, чем чистый HTML.

Далее HTML кодер и CSS дизайнер передают свою наработку JS программисту.

Задача JS программиста: добавить в проект некоторую интерактивность.

Хотя бы вот такую, для начала:

HTML+CSS+JS. Добавлена некоторая интерактивность. Девушка подмигивает.
HTML+CSS+JS. Добавлена некоторая интерактивность. Девушка подмигивает.

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

Заканчивая тему стыковки технологий, упомянем совсем уже кратко, чем занимается бакендер (серверный программист).

Образно говоря, он настраивает нашей девушке мозг, т.е. обеспечивает работу серверной части проекта.

Бакендер настраивает нашей девушке мозг.
Бакендер настраивает нашей девушке мозг.

Итак, мы с вами изучили на образных примерах, как HTML кодер стыкует свою работу с другими специалистами.

Сделаем краткое итоговое резюме по Фронденду.

Чистый HTML
Чистый HTML
HTML+CSS
HTML+CSS
HTML+CSS+JS
HTML+CSS+JS


В данном разделе мы займемся исключительно черепами, скелетами, т.е. чистым HTML кодом.

И только после освоения HTML мы изучим CSS, а затем JS (JavaScript).




Код разметки HTML обычно хранится в файлах *.html (или *.htm).

Типичная структура HTML такая.

<!DOCTYPE html>
<html dir="ltr" lang="ru-RU">
<head>
<meta charset="UTF-8" />
<title>Заголовок</title>
<meta name="description" content="Краткое описание. />
<meta name="keywords" content="ключевые слова" />

<meta name="viewport" content="width=device-width,initial-scale=1"/>
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="width" />
<meta name="apple-mobile-web-app-capable" content="yes" />

</head>
<body>
Выше служебная информация, все, что между &lt;head&gt; и &lt;/head&gt;. 
А здесь (все, что между &lt;body&gt; и &lt;/body&gt;) информация, которую видит пользователь в браузере. 
</body>
</html>


Работа HTML программиста сводится к следующим процессам.
  1. Надо взять шаблон выше, скопировать текст в текстовый файл index.html
  2. Заменить информацию в элементах title, meta description, meta keywords, body своей информацией
  3. Передать сделанный файл специалисту CSS для дальнейшей работы.
Да, понятно, что последний пункт может выразиться в передаче "самому себе", но это не так уж важно.

Тут главное, осознать факт, что HTML есть основа основ, скелет всего проекта, с которого все начинается.

Нужно ли твердо следовать примеру каркаса HTML выше?

Не обязательно. Возьмем, например, google.com (будем равняться на лучших). У него HTML код такой (привожу начало до body по состоянию на 20211108).

HTML код google.com по состоянию на 20211108.

Вы можете поковыряться в справочниках по HTML, чтобы выяснить, какая версия лучше. Вполне возможно, что Вы сделаете какую-то свою версию, которая лучше двух указанных. В таком случае, прошу поделиться наработками.

Ссылки на первоисточники ниже.

На этом "Введение в HTML" заканчиваю. Более глубокое погружение в HTML совершайте по ссылкам ниже. Спасибо за внимание.

Если не уверены, какую ссылку ниже нажать, то тогда начните с этой ссылки:
Курс 1 HTML ➳



Ссылки по теме.



Вылезай из норки! Знакомься! Женись!


Биткойн-система. Вступай! Пробуй! Нам нечего терять, кроме своих рублей!






wpvi.ru JS jQuery конь шахматы youtube React Redux Copyright AV wpvi.ru © 2020-2099 :: :: Иконка живая