HTML — это язык разметки, с помощью которого создают веб-страницы. Совокупность таких страниц, связанных перекрестными ссылками, представляет собой полноценный сайт, который индексируется поисковыми системами. HTML прост для понимания, он не является языком программирования, легко изучается, а значит, любому желающему по силам разработать собственный статический сайт самостоятельно.
Даже если вам кажется, что HTML вам не пригодится, так как управляете вы своим сайтом с помощью движка, то вы ошибаетесь, рано или поздно вам все равно придется прописывать теги вручную, настраивать стили непосредственно в файле .css. Кстати, CSS тесно связан с HTML, поэтому изучаются эти технологи одновременно.
Если в двух словах, то HTML отвечает за разметку веб-документа, он задает структуру вашей страницы, логику содержимого. А CSS (Каскадные таблицы стилей) отвечает за стилизацию страницы. Более того, CSS3 позволяет анимировать HTML-объекты. Но это уже другая история. Существует несколько проверенных способов изучить эти технологии.
Использовать визуальный редактор
Редакторы типа WYSIWYG оснащены удобным пользовательским интерфейсом, благодаря которому вы при помощи мыши выбираете нужные вам элементы сайта (параграфы, заголовки, ссылки и пр.) и помещаете на свою страницу. Результат сразу же отображается на экране.
Такие инструменты, как правило, работают в нескольких режимах: дизайн, код, код-дизайн. Это значит, что вы можете не только кликать мышкой, но и вписывать код непосредственно. В смешанном режиме вы одновременно видите, что происходит на уровнях дизайна и кода. Когда вы добавляете новый блок, его HTML-тег появляется в специальном окне, и вам становится понятно, для чего предназначен этот тег.
Аналогичная ситуация и с изучением CSS. Вы стилизуете свой сайт с помощью графического интерфейса (меняете фоны, позиционируете блоки), а потом заглядываете в CSS-код, чтобы понять, как там что устроено.
Если все так просто, зачем тогда изучать генерированный код, когда можно ограничиться визуальным управлением? Дело в том, что как бы хороши такие редакторы ни были, есть специфические задачи, которые они не смогут решить — разработчик просто не в состоянии всего предусмотреть, чтобы создать для решения этих задач интерфейсы. Что-то простое и средней сложности они сделать позволят, но замысловатые конструкции вам придется описывать вручную.
Делать так же, как делают другие
Можно пойти иным путем. Скачайте готовый HTML-шаблон и посмотрите, из чего он состоит. Все находящиеся там файлы имеют текстовый формат, их можно открыть и править в любом текстовом редакторе. Но лучше использовать специализированные, которые «заточены» под управление кодом (имеется: подсветка тегов, выпадающие подсказки, сворачивание кода и др.). Большинство популярнейших редакторов бесплатны.
Начните с того, что запустите любую HTML-страницу из шаблона в своем браузере, убедитесь, что она работает. Затем откройте эту же страницу (файл) в своем редакторе и измените что-нибудь, например, заголовок или содержимое абзаца. Перезагрузив страницу в браузере, вы увидите изменения. Продолжайте в том же духе, беря пример с написанного профессионалами. Глядишь, скоро сами станете такими же.
Да, поначалу куча непонятных строк будет выглядеть весьма устрашающе, но вы даже сами не заметите, как поймете закономерность их построения, затем начнете добавлять свои согласно образцу. Принцип остается один и тот же всегда, подводных камней мало. Но чтобы упростить процесс понимания, желательно прибегнуть к теории и начать с совсем малого. Тогда знакомство с внутренностями готового шаблона будет более дружелюбным.
Классический способ
Если вам говорят, что врач назначит правильное лечение, это еще не значит, что так оно и будет. Если вам говорят, что тег div является блочным элементом, значит, так и есть, и завтра будет так же. Чем хороши IT, так это тем, что здесь практика не далеко ушла от теории. Они даже ходят где-то рядом друг с другом.
Когда вы начнете с основ при помощи книг или частных уроков, вы будете делать что-то уж совсем примитивное, но этого достаточно для понимания принципов построения веб-страниц.
HTML и CSS — всего лишь инструменты, такие же, как кисть или карандаш. Они дают возможности, но не развивают вашу фантазию. Так что изучать код передовых шаблонов настоятельно рекомендуется. С помощью книг вы хоть и получите базовые навыки, будете понимать, откуда «растут ноги», но без ориентирования на живые примеры ваши достижения, скорее всего, будут скудненькими.
Сколько всего нужно времени на изучение? Это зависит от целей. Тем, кому нужно просто научиться отличать параграфы от списков, вставлять ссылки и изображения — день-два, и это учитывая, что они никогда ничем подобным не занимались.
При более амбициозных целях, таких как верстка своего сайта или даже верстка под заказ, временного потолка нет, как и не существует ничего идеального — все всегда меняется, развивается, требует новых навыков и знаний. Вы можете овладеть HTML и CSS как поверхностно, так и увязнуть в этих технологиях на долгие годы. Решать вам.
