Всем привет, если ты решил(а) прочитать эту статью, значит ты уже слышал(а) или сталкивался(ась), возможно даже изучал(а) HTML, но видимо что-то пошло не так. На самом деле не важно почему ты здесь , важно, что я могу тебе помочь изучить эту технологию, ну или направить на верный путь.
Пролог
"С чего начинается Родина фронтенд"? Правильно, с буквы "Ф", шутка, надеюсь вы еще тут?! А теперь серьёзно. Изучение frontend да и web в целом начинается чаще всего, конечно, с HTML. Но также часто с него и заканчивается, потому что многие , кто наткнулся на сложное описание этой технологии или попал на не совсем "толковый" курс быстро теряет энтузиазм и бросает изучение, с мыслью, что для него это слишком сложно. Сегодня я вам попытаюсь доказать, что все не так уж плохо!
Если вам нравятся мои статьи, вы можете меня поддержать подписавшись на меня и присоединившись в мой телеграм канал. Там еще больше информации о фронтенде.
Начинаем
Для начала давайте узнаем, что вообще такое HTML? Аббревиатура HTML расшифровывается как «язык гипертекстовой разметки». Сам HTML — это стандартизированный язык разметки документов для просмотра веб-страниц в браузере. Звучит не совсем понятно, не так ли? Давайте разбираться! Простым языком, HTML — это набор тегов, с помощью которых можно отобразить и структурировать информацию в браузере (можно не только в браузере, но мы рассмотрим частный случай). То есть с помощью HTML мы можем преобразовать/отобразить информацию для удобочитаемого и наглядного вида. Теперь, я думаю понятно, так что идем дальше.
Из чего состоит HTML?
HTML состоит из тегов. Тег - это набор правил, по которым браузер понимает как отобразить информацию заключенную внутрь тега. По синтаксису теги могут быть 2-х видов:
- парные. Такие теги имеют вид <навание_тега>текст который мы хотим отобразить</название_тега>, например, тег параграфа будет выглядить так: <p>Я параграф</p>;
- непарные(еще их называют самозакрывающиеся / одиночные). Такие теги имеют следующий вид, <название_тега />. Например, тег отвечающий за отображение картинок имеет именно такую структуру и выглядит так: <img src="ссылка на картинку" />, на src="" пока не обращайте внимание, это назвается аттрибутом и о них мы поговорим дальше. Одиночных тегов не так много, так что запомнить их не составит труда.
Из выше сказанного вам нужно понимать, что каждый тег служит для своей цели. Oдни для отображения картинок, другие для работы с заголовками, третьи для формирования ссылок и т.д. Заучивать все теги особого смысла нет, так как на просторах интернета есть кучу справочников, в которых в любой момент можно посмотреть для чего служит тот или иной тег и какие аттрибуты он содержит.
Аттрибуты
Давайте же попытаемcя раскрыть занавес и ответить на вопрос "Что такое аттрибуты"? Аттрибуты - это дополнительные данные, которые расширяют возможности тега. У некоторых тегов есть обязательные аттрибуты, без которых использовать такие теги бессмысленно. Например, вернемся к тегу img (напомню, что данный тег отвечает за отображение картинок) и его аттрибуту src, без которого данных тег не имеет никакого смысла, так как он не может ничего отобразить. Почему так, спросите вы? Всё давольно-таки просто, в аттрибуте src указывается ссылка на изображение, и без этой ссылки браузер не поймёт откуда брать изображение для отрисовки. То есть нет ссылки - нет и изображения.
Изучение
Теперь, когда мы разобрались что такое HTML и из чего он состоит, мы можем приступить к изучению. Итак, давайте составим план по которому построим процесс изучения:
- Первое, что нужно сделать, это изучить часто используемые теги и основные правила по которым они взаимодействуют друг с другом. Про часто используемые теги я думаю пояснять не нужно, их легко можно найти в интернете. А вот про основные правила я поясню. Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head> и нигде иначе. Чтобы не возникло ошибки, следите за тем, чтобы теги располагались в коде правильно.
- Второе, найдите курс по основам HTML. В интернете на данный момент существует огромное колличество бесплатных курсов. Просто заходите на YouTube, находите десяток курсов и выбираете тот, который вам понравится больше. Тут главное чтобы вам была понятна информация которую вещает оратор.
- Один из самых главных пунктов. Всё что вы изучили нужно закреплять практикой, причем этой практики должно быть много. Не бойтесь того, что вы чего-то не знаете или забыли, это нормально. В таком случае, просто идёте в поисковик и учитесь находить нужную информацию. Так вы еще лучше закрепите знания. Где брать практику? Тут есть несколько вариантов, если вы уже уверены в себе и готовы попробовать сверстать макет самостоятельно, то находите в интернете макет сайта (пусть для начала это будет простой макет, например, портфолио или landing page) и пробуете его реализовать. ВАЖНО ПОНИМАТЬ, что вы, скорее всего, еще не знакомы с CSS, поэтому внешний вид вам не важен. Вам нужно научиться видеть в макетах структуру HTML, т.е. глядя на макет понимать какие теги и где вы будете использовать.
Второй вариант получения практики, это найти на YouTube какой-нибудь воркшоп по HTML и попытаться повторить все за оратором, НО не нужно бездумно переписывать, вы должны попытаться понять каждую строчку написанную автором. Чем больше такой практики вы реализуете, тем быстрее и лучше вы освоите HTML. - Вам всё еще нужно больше практики, так что вернитесь к пункту 3.
Выводы
Какие выводы мы можем сделать? Для того чтобы изучить HTML много времени не нужно. При соблюдении данного плана и наличии свободного времени (желательно от 2-х часов в день) можно изучить данную технологию за 1-1.5 недели на довольно крепком уровне.
Надеюсь, что данный материал был вам полезен. Вы можете поддержать меня подписавшись на меня тут и на мой телегам (там, кстати, много информации о фронтенде). Спасибо и не бойтесь развиваться и изучать новое!