Как стать Front-end разработчиком? #1 HTML
forxtuВ данной статье речь пойдет о том, что такое язык разметки, из чего он состоит, как освоить HTML и какие ресурсы стоит использовать для изучения.
HTML (Hyper Text Markup Language) - это язык разметки гипертекста. Он предназначен для создания структуры веб-страницы.
Основные идеи
- HTML описывает структуру веб-страниц с использованием разметки
- HTML элементы представлены тегами
- HTML теги являются строительными элементами сайта и обозначают фрагменты содержимого, такие как «блок», «заголовок», «ссылка» и так далее.
Структура HTML файла
Типичный HTML документ состоит из “заголовка” и “тела”.
В заголовке находятся различные мета теги, название документа, импортируются стили и некоторые скрипты.
Важно знать! Так как файл читается сверху вниз, то и строки кода выполняются сверху вниз. Поэтому скрипты лучше импортировать в конце документа - чтобы страница загружалась и не ждала, пока загрузятся все необходимые скрипты. Также можно использовать варианты асинхронной загрузки скриптов.
В тело помещаются теги для создания структуры сайта и импортируются JS скрипты.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Заголовок</title>
<link rel="stylesheet" href="путь/до/файла/style_name.css" />
</head>
<body>
<div>
<h1>Привет!</h1>
<p>
Параграф
</p>
</div>
<script src="путь/до/файла/script_name.js"></script>
</body>
</html>Ресурсы для изучения HTML
Русскоязычные:
- HTML academy - интерактивная платформа для изучения теория и практики, есть как бесплатная версия так и платная
- HTML book - справочник и онлайн учебник по HTML5
Англоязычные:
- Free code camp - лучшая интерактивная платформа для изучения, которую я встречал
- W3 school - учебник/справочник по HTML
План действий
- Сначала пробуйте интерактивную версию изучения - читайте теорию и повторяйте на практике (не копипастите!).
- Если чего-то не знаете, обращайтесь к справочнику с конкретным вопросом, разбирайте его и сразу же применяйте на практике.
- Как только будете знать минимальный набор тегов + базовый css - пробуйте сделать свой мини-проект. В процессе создания проекта будет много вопросов - обращайтесь к справочнику и применяйте, так вы лучше запомните теорию и подкрепите практикой.
- Берите любой бесплатный PSD шаблон и верстайте его используя HTML и CSS или возьмите любой понравившийся сайт как пример и сверстайте его копию.
Вёрстка - это создание веб-страницы с использованием HTML и CSS (возможно дополнительное применение JS).
Послесловие
Главное в изучении HTML - это освоить основные теги, понять как их применять, как они зависят друг от друга и затем практиковаться пока процесс не станет лёгким и понятным.