Изучение HTML – пошаговый учебный план и ресурсы

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

Помните “Дорожную карту” для начала веб-разработки? Эта статья посвящена первому этапу дорожной карты: HTML.

Итак, что такое HTML и почему его изучение является самым первым шагом на вашем пути к веб-разработке?

Как уже упоминалось в Дорожной карте, HTML (Hyper Text Markup Language) – это стандартизированный язык разметки для создания веб-страниц. С его помощью можно создать основу сайта и добавить содержимое (текст, изображения, аудио и видео). HTML размечает их так, чтобы они могли быть правильно интерпретированы и отображены браузером. Как вы увидите в последующих шагах, CSS позже будет использоваться для стилизации вашей страницы – чтобы она выглядела как веб-сайт, а не как обычный документ.

Короче говоря, используя HTML, вы закладываете фундамент своего сайта. Вы добавляете весь текст, создаете структуру (заголовки, абзацы, списки, таблицы), добавляете ссылки на другие страницы, изображения, аудио, видео. Затем HTML делает разметку (в конце концов, это язык разметки), чтобы четко указать браузеру, что представляет собой каждый из ваших фрагментов контента, чтобы браузер мог правильно его интерпретировать и отобразить.

Что мне нужно, чтобы начать изучать HTML?

Ну, прежде всего, конечно, компьютер. Хорошие новости? Вам не нужно ничего навороченного – подойдет любой компьютер, независимо от операционной системы (Mac, Windows, Linux).

Далее, вам понадобится редактор кода – и нет, Word не подойдет. Как минимум, вы будете использовать текстовый редактор по умолчанию, например, Notepad, если вы работаете на компьютере с Windows; на Mac поищите что-нибудь под названием TextEdit. Эти программы предустановлены на ваших машинах, вам нужно только найти их. Если вы используете Linux, вам нужно будет установить редактор кода – вы можете прочитать эту статью, чтобы узнать, как его выбрать. На самом деле, это хорошая идея – прочитать статью и установить специализированную программу, поскольку они оснащены множеством функций, которые облегчат ваше обучение (например, подсветка синтаксиса, сигнализация ошибок и т.д.).

Наконец, вам понадобится веб-браузер – подойдет любой современный браузер: Chrome, Firefox, Safari, если вы работаете на Mac. Конечно, поскольку вы будете учиться, используя онлайн-ресурсы, вам понадобится подключение к Интернету.

Хорошо, я смотрю на редактор кода, что теперь?

Теперь вы создаете новый документ – Файл, Новый… и сохраняете его в маленькой папке, которую вы создали для своего обучения. Дайте ему любое имя, но обязательно сохраните его как документ .html (с расширением .html).

Итак, теперь у вас есть контрольный список для начала работы с HTML. Вы можете отметить их здесь (они останутся отмеченными). Вот куда вы можете пойти, чтобы начать учиться.

• Подождите – знаете что? Прежде чем вы начнете изучать все это…
• …посмотрите это видео “Что такое HTML” от Джереми Патонье. Оно подходит для начинающих, настраивает вас на нужный лад, к тому же у него такой очаровательный французский акцент! Чтобы убедиться в этом, вот оно, встроенное прямо здесь!
• Ресурсы для изучения HTML
• Итак, переходим к списку ресурсов (не в определенном порядке – попробуйте каждый – повторение – мать учения, как вы знаете):
• FreeCodeCamp (бесплатно)
• FreeCodeCamp – это, без тени сомнения, один из лучших обучающих ресурсов. Он начнет с того, где вы находитесь (полный новичок), и плавно переместит вас через тонну информации, даже не заметив этого. Чтобы убедиться, что все это закрепится, он предлагает множество реальных проектов, а чтобы помочь вам в трудоустройстве, по ходу обучения вы получите сертификаты. И не только это, но и солидное всемирное сообщество единомышленников. Практический, практический и информационный одновременно, вы учитесь на практике и получаете немедленную обратную связь, что всегда полезно, когда вы учитесь. Вы также получаете возможность отлаживать свой код на ранней стадии – еще одно полезное дополнение. С ними просто невозможно ошибиться, но, учтите, это вызывает сильное привыкание; вы будете возвращаться изо дня в день, чтобы убедиться, что эта полоса не прервалась!
• Mozilla Developer Network (MDN) (бесплатно)
• Независимо от того, какой браузер вы выберете, стоит заглянуть на страницу веб-документов Mozilla Developer Network. Здесь вы найдете введение в изучение HTML (очевидно, иначе я бы не включил его в этот список), но и ОЧЕНЬ МНОГОЕ другое. Как и раньше, вы сможете найти множество других ресурсов по мере продвижения по пути. В комплекте с примерами кода. Не стесняйтесь бродить по сайту – у них много интересного, куда бы вы ни заглянули. Думаю, вы быстро добавите его в закладки.
• W3C Schools (бесплатно)
• W3C Schools: W3C – это консорциум, который фактически управляет HTML, поэтому вполне логично, что они являются хорошим источником для обучения. Они изложили свой контент в очень чистой и понятной манере, с хорошей, четкой структурой, кусочками контента, некоторыми очень удобными рекомендациями, примерами кода на практике и множеством очень исчерпывающих списков. Они также предоставляют множество примеров и возможностей для самостоятельной работы, чтобы вы могли увидеть каждую функцию в действии. По мере продвижения вы можете проверить свои знания с помощью упражнений и викторины и даже получить небольшую сертификацию (хотя жюри еще не определилось с ее полезностью / актуальностью; я бы сказал, что хороший проект портфолио будет иметь гораздо больший вес…).
• Академия Хана (всегда бесплатно)
• Другой учебный сайт, который я могу поклясться использовать в любой день, – это Khan Academy. В их курсах, включая Intro to HTML&CSS – создание веб-страниц, есть все – структура, видео, примеры, задачи, но помимо этого – есть вкладка с документацией, где кратко описаны основные моменты, вы можете практиковаться на их модельном коде – и даже делать свои собственные крутые маленькие спин-оффы, которыми вы можете поделиться, чтобы получить обратную связь (и/или похвалу ) и, наконец, но не в последнюю очередь, есть транскрипт, который может пригодиться, если у вас есть какие-то особые ограничения. О, и есть много языковых версий, если английский не ваш.
• EdX (бесплатно)
• РЕАЛЬНО отличный сайт с замечательными курсами (я расскажу вам больше в другой статье); я обнаружил, что он предлагает невероятную ценность бесплатно (или за небольшую сумму, если вы выберете путь сертификации (кстати, их сертификаты действительно что-то значат, поскольку они выдаются *крупными* университетами, и ваша личность проверяется на каждом этапе пути). Взгляните на курс HTML5&CSS Fundamentals от W3C и Microsoft на edx.org – на него записалось 300.000 человек! Для бесплатной версии получите аккаунт, зарегистрируйтесь и выберите Аудит этого курса. Он предлагает вам сочетание видео, справочной информации, быстрых вопросов, самостоятельного изучения и многого другого.
• Наконец – LinkedIn Learning и Pluralsight: пара платных вариантов (удивительная ценность при относительно небольшой стоимости)
• LinkedIn Learning (бывший Lynda.com) – это мой абсолютный выбор для почти всего обучения. Нет ничего, чего бы у них не было – и это особенно верно, когда речь идет об изучении HTML. Воспользуйтесь бесплатным пробным месяцем и попробуйте один (или пять :)) курсов из их каталога, включающего около 220 курсов по HTML. Вы можете попробовать курс “Основы HTML” и, возможно, посмотреть, как все это сочетается, пройдя также курс “Основы веб-программирования”. Курсы, абсолютно все, очень хорошо сделаны – не только с точки зрения содержания, но и с точки зрения презентации и учебных ресурсов. Поскольку все курсы состоят из видеофрагментов, вы можете смотреть, останавливаться, думать, делать, перематывать и т.д., что очень полезно, особенно когда уровень сложности (в конечном итоге) возрастает. Однако предупреждаю: вы попадетесь на крючок!
• Практически то же самое можно сказать и о Pluralsight – чрезвычайно качественные, хорошо поставленные курсы, созданные их командой из примерно 1500 авторов-экспертов! Единственное отличие в том, что Pluralsight, похоже, ориентирован в основном на профессионалов, но это не значит, что у них нет хороших курсов для начинающих. Возьмем, к примеру, вот это: Основы HTML – возможно, воспользуйтесь их 10-дневной пробной версией и проверьте ее.
• Несколько других ресурсов, которые я нашел очень полезными и хорошо сделанными:
• Что бы вы ни выбрали для начала изучения HTML, крайне важно не просто читать и читать снова; практика – это ключ. Обязательно отрабатывайте каждую новую концепцию, пробуйте ее на практике – это единственный способ добиться прогресса.
• Следующая остановка: когда вы закончите и почувствуете, что готовы двигаться дальше, загляните в Learn CSS – или, если вам нужно увидеть общую картину, перейдите в Roadmap to web dev.
• Все готово! Приступайте к работе и дайте мне знать, как это работает для вас, и если есть другие ресурсы, которые, по вашему мнению, должны быть включены в эту статью – напишите в комментариях ниже!
• Изучение HTML изображение