Если вы хотите выучить HTML, Вы находитесь в нужном месте. Здесь я введу вас в курс дела, объяснив что HTML есть, почему вы должны этому научиться, и, самое главное, как тили выучить HTML.

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

Оглавление

Что такое HTML?

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

Наряду с CSS и JavaScript это один из трех основных языков Интернета. У каждого из них своя роль:

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

Вы можете легко просмотреть HTML-код любой веб-страницы, в том числе тот, на котором вы сейчас находитесь. В любом из основных веб-браузеров Microsoft Windows нажмите Ctrl+Uи HTML-код появится на новой вкладке.

Краткая история HTML

Британский ученый-компьютерщик Тим Бернерс-Ли изобрел HTML в 1991 году.. Вы все еще можете просмотреть первый в мире веб-сайт здесь. Это очень просто по сегодняшним меркам, но ему нужно было с чего-то начинать. Он показывает фундаментальную основу того, что такое веб-сайт — набор страниц информации, связанных между собой интерактивными ссылками.

Вот основные вехи развития HTML за эти годы:

• 1991 г. — Тим Бернерс-Ли изобретает HTML, но официально он не выпущен.
• 1993 г. — HTML 1.0 официально выпущен, хотя веб-сайтов создано пока немного.
• 1995 г. — Выпущен HTML 2.0 с дополнительными функциями.
• 1997 г. — Выпущен HTML 3.0 с более мощными функциями, хотя эти новые функции, как правило, замедляют работу веб-браузеров.
• 1999 г. — Выпущен HTML 4.0, и он чрезвычайно успешен.
• 2012 — Выпущен HTML 4.01.
• 2014 — Выпущен HTML 5.0, который считается расширенной версией HTML 4.01.

Основы HTML и советы

Прежде чем я углублюсь во все это, я хочу дать вам преимущество, объяснив несколько основ HTML.

Теги

В HTML, тег — это часть языка разметки, которая указывает начало и конец определенного элемента HTML. Например:

• 
  

  используется для заголовка H1.

• <р> отмечает начало нового абзаца.
• <изображение> используется для вставки изображения.
• <а> используется для гиперссылок.

Чтобы закрыть тег, добавьте его снова, но с косой чертой, например:

Вы можете просмотреть более полный список тегов HTML здесь.

Атрибуты

Атрибуты предоставляют дополнительные биты информации и помещаются в начальный тег. Например, давайте посмотрим на эту строку кода:

<a href="https://crocoblock.com/">Visit Crocoblock</a>

В этом случае, href атрибут, добавленный к <а> тег, чтобы определить URL-адрес, на который он будет ссылаться. Таким образом, этот код будет означать, что, нажав на текст «Посетить Crocoblock», ваш веб-браузер перейдет на https://crocoblock.com/.

Два правила, которые нужно запомнить

1. Большинство тегов должны быть открытые и закрытые с элементом между ними. Например:

<h1>This is a H1 Header</h1>.

2. Если вы используете несколько тегов, вам нужно закрыть их в том порядке, в котором они были открыты. Например, если вы хотите превратить заголовок H1 в гиперссылку, это будет выглядеть так:

<h1><a href= “https://crocoblock.com/">Crocoblock</a></h1>

Почему вы должны изучать HTML?

Итак, как я уже объяснял, HTML является основой для всех веб-сайтов в мире. HTML настолько важен для Всемирной паутины, что понимание HTML-кода может быть значительным преимуществом, если вы делаете что-либо онлайн. Давайте взглянем на некоторые ключевые причины, почему.

1. Вы сможете изменить свой собственный сайт

Даже если вы не создаете свой веб-сайт самостоятельно с нуля, знание HTML все равно может быть полезным. Много Темы WordPress иметь виджеты, использующие базовый HTML-код, поэтому возможность легко редактировать эти виджеты является преимуществом. Это означает, что вам не придется связываться с веб-разработчиком каждый раз, когда вы хотите изменить часть своего веб-сайта.

2. Как только вы узнаете HTML, вам будет легче изучать другие типы кода.

Изучение программирования может показаться пугающим, когда вы только начинаете. Но HTML — хорошее место для начала, потому что относительно легко научиться. Затем, как только вы освоите HTML, вы сможете изучать CSS.

Как только вы познакомитесь с CSS, вы можете начать изучать JavaScript.

3. Вы могли бы зарабатывать деньги как веб-разработчик

Как только вы познакомитесь с HTML, CSS и JavaScript, у вас будут три основных элемента для веб-разработки. Затем вы можете начать думать о том, чтобы стать профессиональным веб-разработчиком.

По данным Бюро статистики труда США, Ожидается, что рабочие места веб-разработчиков увеличатся на 30% за десятилетие до 2031 года. Средняя заработная плата веб-разработчика в США в 2021 году составляла 78 300 долларов в год или 37,65 долларов в час. Так что на этой работе можно заработать.

Вам может быть интересно, где можно найти работу по веб-разработке? Ну, раз уж вы спрашиваете, я уже писал об этом здесь: лучшие платформы для поиска работы и найма разработчиков WordPress.

3 способа выучить HTML

Хорошо, теперь вы знаете, что такое HTML и почему это важно. К настоящему времени вы, вероятно, задаетесь вопросом, где и как вы можете этому научиться. Давайте рассмотрим три способа сделать это, начиная с самого простого.

Смотрите обучающие видео на YouTube

YouTube — это не только место, где можно посмотреть забавные видео с котиками и отрывки из ситкомов. Друзья. Он также содержит множество полезных обучающих видеороликов, и HTML не является исключением. YouTube — идеальное место для начала, так как видео бесплатны.

Программирование с помощью Моша — один из лучших каналов для обучения программированию с более чем 3 миллионами подписчиков. Если у вас есть свободный час, рекомендую посмотреть его Ускоренный курс HTML:

Если вы хотите уделить этому больше времени и углубиться, канал YouTube SuperSimpleDev имеет полный 6,5-часовой курс:

6,5 часов — это много за один раз, поэтому, если вы хотите посмотреть его по частям, вот главы:

• основы HTML;
• Основы CSS;
• Наведения, переходы, тени;
• Chrome DevTools и блочная модель CSS;
• стили текста;
• Структура HTML;
• изображения и текстовые поля;
• Свойство отображения CSS;
• Элемент div;
• Метод вложенных макетов;
• CSS-сетка;
• флексбокс;
• вложенный флексбокс;
• Позиция CSS;
• Абсолютное и относительное положение;
• Завершить проект;
• Дополнительные возможности CSS.

Пройдите онлайн-курс HTML

Вместо того, чтобы смотреть видео на YouTube, вы можете предпочесть более структурированный онлайн-курс. Ведь на ютубе есть огромный потенциально может отвлечь вас со всеми остальными видео, которые вы могли бы посмотреть.

Кодакадемия это хорошее место для начала, и они предлагают бесплатные курсы.

Кодакадемия бесплатный начальный уровень Изучите курс HTML занимает около 9 часов и уже было сделано более 5 миллионов человек. Он состоит из 6 уроков по 4 проектам:

• Элементы и структура — знакомит вас с HTML и обсуждает стандарты документов HTML.
• Столы — узнайте о синтаксисе, необходимом для добавления таблиц в ваши HTML-документы.
• Формы — узнайте все о том, как работают HTML-формы и как интегрировать проверки HTML5.
• Семантический HTML — как написать более понятный и доступный HTML.

Еще один сайт, на котором вы можете изучать HTML в структурированном виде, — это сайт с соответствующим названием. Learn-html.org.

Он содержит серию многих уроков, разделенных на следующие разделы:

• Начало работы с HTML и CSS — узнайте об основах, таких как ссылки, списки, изображения, стили, классы, цвета, макет сетки и значки.
• Начальные элементы — узнайте о кнопках, панели навигации, раскрывающихся списках, всплывающих подсказках, дизайне списков, дизайне таблиц и дизайне форм.
• Продвинутые учебники по HTML — узнайте о форматировании текста, таблицах, фреймах, формах, холсте, SVG, видео, аудио и многом другом.
• Продвинутые учебники по CSS — узнайте о высоте и ширине, адаптивном веб-дизайне, размерах блоков, шрифтах, текстовых эффектах, положении, фоне, градиентах и ​​многом другом.
• Мастер-классы по CSS — узнайте об анимации, области просмотра, flexbox, колонках, переменных CSS, 3D-преобразованиях, входных псевдоклассах и псевдоэлементах.

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

Практика HTML в безопасной среде

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

Один сайт, который отлично подходит для этого, КодПен:

CodePen — это социальная среда разработки, которая позволяет вам писать код в браузере и видеть результаты вживую. Затем вы можете показать свой код сообществу CodePen, что позволит им оставить отзыв и разветвить его в своих собственных версиях.

Резюме

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

1. Вы сможете изменить свой собственный сайт.
2. Как только вы изучите HTML, вам будет легче изучать другие типы кода.
3. Вы можете зарабатывать деньги как веб-разработчик.

Существуют различные способы изучения HTML, и три наиболее эффективных из них:

1. Смотрите уроки на YouTube.
2. Пройдите онлайн-курс HTML.
3. Практика HTML в безопасной среде.

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