Учим HTML - основу веб-разработки
@honey_and_moneyHTML - HyperText Markup Language или просто язык разметки. Неправильно этот язык называть языком программирования, он таковым не является.
Для начала давайте разберемся, зачем вообще он нужен в вебе?
Самый простой сайт (обычный, информационный), который не содержит никакого функционала обычно пишется на трёх языках - html, css, javascript
(Про функциональность поговорим в следующих статьях, для начала разберемся в самом простом)
Итак, за что отвечает каждый из языков:
CSS - дизайн сайта, то есть это цвета, рамки, расположение элементов на странице и тд. С помощью CSS можно указать размеры различных блоков на вашем сайте.
JavaScript - динамика сайта. То есть если вы напишите сайт только на html и css он будет статическим (ничего двигаться на странице не будет). Если вы добавляете скрипты на Javascript, то сайт становится визуально приятнее и воспринимается легче. То есть например вы создали интернет-магазин. С помощью джаваскрипта можно сделать анимацию добавления товара в корзину - как будто картинка летит в корзину.
И наконец HTML - помогает сверстать страницу, то есть расположить логические блоки сайта так как надо. (Например меню сайта сверху, основной информационный блок ровно под меню, колонка с новостями правее и тд.)
Приведу пример последовательной разработки сайта:
Пишется структура сайта на html (Создаются разные блоки)
Затем с помощью CSS вы эти блоки украшаете.
Ну и наконец делаете динамику с помощью JavaScript.
Теперь перейдем конкретно к HTML (если до этого этапа что-либо не понятно - не волнуйтесь, в процессе последовательного изучения всё встанет на свои места)
Структура пустой html-страницы:
Разберём по порядку:
Базовым элементом в html является тэг.
Тэги бывают как двойными, так и одинарными.
Двойные теги - имеют открывающий и закрывающий теги
То есть например:
<html> - открывающий тег
</html> - закрывающий тег
Тут html - название тега.
Как понять, каким является тег - открывающим или закрывающим?
В закрывающих тегах перед их названием обязательно ставится наклонный слеш.
Таким образом в нашем примере 4 тега:
<html>, <head>, <title>, <body>
Каждый из них имеет закрывающий тег.
Вообще структуру html-кода стоит рассматривать как капусту. Теги вкладываются в теги
То есть например всё что находится между тегами <html> и </html> является их содержимым.
Для тегов <head> и </head> содержимым является всё, что между ними (Тег <title>)
У каждой страницы есть тег <title> - внутри него пишется название страницы, которое будет отображаться в названии вкладке
Вот например в коде этого сайта внутри тега title написано Telegraph
Обычно в теге <head> пишется техническая информация о сайте, которая почти нигде не отображается.
Всё содержимое сайта, которое увидит пользователь располагается внутри тега <body>
Думаю, для первого (или далеко не первого) знакомства с вебом достаточно. Не буду сильно перегружать вас. Если есть желание поизучать структуры html-страниц различных сайтов - прямо на нужном сайте можно нажать правой кнопкой мыши и выбрать "просмотр кода страницы". Откроется новая вкладка, вы там сможете увидеть кучу кода, но попытайтесь на таких страницах найти теги, которые мы уже разобрали и убедитесь что внутри них находится именно то, что и должно быть.
@honey_and_money - Готовься напрягать мозги каждый день вместе с нами!