В данной статье речь пойдет о том, что такое язык разметки, из чего он состоит, как освоить 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

План действий

  1. Сначала пробуйте интерактивную версию изучения - читайте теорию и повторяйте на практике (не копипастите!).
  2. Если чего-то не знаете, обращайтесь к справочнику с конкретным вопросом, разбирайте его и сразу же применяйте на практике.
  3. Как только будете знать минимальный набор тегов + базовый css - пробуйте сделать свой мини-проект. В процессе создания проекта будет много вопросов - обращайтесь к справочнику и применяйте, так вы лучше запомните теорию и подкрепите практикой.
  4. Берите любой бесплатный PSD шаблон и верстайте его используя HTML и CSS или возьмите любой понравившийся сайт как пример и сверстайте его копию.

Вёрстка - это создание веб-страницы с использованием HTML и CSS (возможно дополнительное применение JS).

Послесловие

Главное в изучении HTML - это освоить основные теги, понять как их применять, как они зависят друг от друга и затем практиковаться пока процесс не станет лёгким и понятным.

0 comments
Anonymous
Markdown is supported

Be the first guy leaving a comment!