Как я изучал 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 lang="ru">
и закрывающийся
</html>
Чаще всего подобные теги внутри содержат либо другие теги, либо текст. Большинство тегов html, как правило, имею такой же вид, но есть и исключения.
<head></head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
Это достаточно важный тег (например, для СЕО продвижения) и не стоит его игнорировать. Если кратко, то поисковые системы используют этот тег для отображения заголовка в поиске или определении, подходит ли ваша страница по поисковому запросу или нет. Далее тег head закрывается и открывается следующий тег <body>
<body></body>
<h1>Hello World!</h1>
<h1></h1>
Существует огромное множество тегов и каждый отвечает за свою часть на сайте. Лучше всего изучите сначала как можно больше html-тегов и их свойства, а потом переходите к CSS. Например тег <a>
<a href="url">Текст ссылки</a>
<img src="url" alt="">
<img src="https://hotgeo.ru/uploads/posts/2017-10/1509441205_gctv-google.jpg" alt="Изображение офиса Google" style="max-width:300px">
Для большего понимания чаще используйте консоль разработчика (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 и о том, как его изучать.
Переходите по ссылкам которые я указал, изучайте все теги, чтобы больше понимать о структуре сайтов и как они устроены.
Это мой первый опыт написания блога и статей обучающего характера. Надеюсь кому-то эти материалы станут полезными.