Как я изучал html будучи новичком в веб разработкой

Первое, что придется делать, это "гуглить". Искать информацию придется очень много и часто, особенно в начале своего пути. Не ленясь, просто ищите в интернете курсы, статьи, учебники. Читать тоже придется много, чтобы понимать "Что тут вообще происходит!?".

Находим ресурс где можно освоить html

HTML является неотъемлемой частью любой веб-разработки. Конечно, в больших проектах все немного сложнее, чем просто сверстать html страницы. Но в любом случае, чтобы работать с веб-страницами придется немного разобраться с html. Не останавливайтесь на одной статье, так как сколько людей столько и мнений, поэтому подход к предоставлению информации может отличаться.

Сайты которые я сам использовал в самом начале для изучения html

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

Текстовый редактор, где мы будем писать код

Итак, для начала вам нужен текстовый редактор, блокнотом пользоваться для этого не советую. Подробнее о текстовых редакторах.

Введение в html

После того, как вы скачали текстовый редактор, создайте файл index.html обязательно в таком расширении (html). Поместите в созданный файл код что я указал ниж, потом откройте файл через любой браузер. Вы должны увидеть надпись "Hello World!". "Hello World" традиционно используется в качестве первой программ для изучения любого языка. Не обязательно должна быть именно эта фраза, можете написать все что вам хочется. Попробуйте заменить этот текст и перезапустить страницу в браузере, вы должны увидеть имзенения. Код ниже - это стандартная основа для html разметки, лучше всего придерживаться ее, но если вы удалите часть тегов html можно заметить что браузер все равно отработает нормально.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <h1>Hello World!</h1>
</body>
</html>

Давайте разберем что написано в html коде:

<!DOCTYPE html>
Обозначает тип документа.
<html lang="ru"></html>
это контейнер, в котором находится содержимое всей вашей страницы. Обратите внимание, что тег html состоит из двух частей. Открывающийся тег
<html lang="ru"> и закрывающийся </html>

Чаще всего подобные теги внутри содержат либо другие теги, либо текст. Большинство тегов html, как правило, имею такой же вид, но есть и исключения.

<head></head>
Данный тег служит помощью для браузера. Чаще всего тут указывается как должна отображаться страница (например, кодировка текста)
<meta charset="UTF-8">
Так выглядит кодировка текста.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Информация о том, как должна отображаться страница в мобильном устройстве.
<title>Document</title>
Title - это заголовок вашей страницы. Вы можете увидеть этот текст наведя на вкладку браузера.

Это достаточно важный тег (например, для СЕО продвижения) и не стоит его игнорировать. Если кратко, то поисковые системы используют этот тег для отображения заголовка в поиске или определении, подходит ли ваша страница по поисковому запросу или нет. Далее тег head закрывается и открывается следующий тег <body>

<body></body>
Именно в этом теге находится все, что будет отображаться на вашей странице. То есть тело документа html. В нашем случае, это
<h1>Hello World!</h1>
Так же можно увидеть тег <h1>
<h1></h1>
Это тег заголовка. Существуют 6 видов заголовков. Уровень 1 - самый верхний, уровень 6 - самый нижний.

Существует огромное множество тегов и каждый отвечает за свою часть на сайте. Лучше всего изучите сначала как можно больше html-тегов и их свойства, а потом переходите к CSS. Например тег <a>

<a href="url">Текст ссылки</a>
Это тег "ссылки" на другой документ / веб-страницу
<img src="url" alt="">
Тег <img> отвечает за отображение картинок (изображений). "url" - это путь до документа на вашем или другом сервере. Вы можете вставлять на свой документ изображения с других сайтов, если это необходимо. Например:
<img src="https://hotgeo.ru/uploads/posts/2017-10/1509441205_gctv-google.jpg" alt="Изображение офиса Google" style="max-width:300px">
и как это отображается в веб-странице:

Изображение офиса Google

Для большего понимания чаще используйте консоль разработчика (F12) для изучения других сайтов (например, этого сайта), он достаточно легко сверстан, чтобы можно было разобраться, что тут происходит. Позднее, когда я начну говорить о CSS, чуть подробнее расскажу как на этом сайте устроен внешний вид.

Как можно понять из описанного ранее, у большинства тегов есть атрибуты. Для тега <img> используются атрибуты: src, alt и style.

  • Атрибут style относится к CSS стилизации тега.
  • Src - путь, по которому будет браузер искать изображение.
  • Alt - описание изображения.

Некоторые атрибуты значительно изменяют внешний вид и смысл использования тега, понимание этого поможет в работе с html. Приведем еще пример тега <input>

Атрибут type для тега input

<input type="text">
<input type="checkbox">
<input type="range">
  • свойство "text"
  • свойство "checkbox"
  • свойство "range"

Тег <input> часто используется в формах (например, ваш пол М Ж регистрация, авторизация, опросы и так далее).

Вот как влияют атрибуты на свойства html тегов. Это только пример, на самом деле у одного тега <input> куда больше вариантов одного только атрибута type.

Заключение

Это статья ознакомительного характера для тех, кто еще не знаком с html или хотел бы начать его изучение. Для того чтобы дать представление о том, что может html и о том, как его изучать.

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

Это мой первый опыт написания блога и статей обучающего характера. Надеюсь кому-то эти материалы станут полезными.