Advertisement
  1. Web Design
  2. HTML & CSS

Лучший способ изучения HTML

by
Read Time:15 minsLanguages:

Russian (Pусский) translation by Anton L (you can also view the original English article)

Обучение чему-нибудь новому, изначально может оказаться устрашающим занятием; откуда начать, кого слушать, кого не стоит слушать - процесс может невероятно усложниться. Поэтому я и решил написать этот пост. Это поможет вам распланировать что учить и в каком порядке, как начать обучение, несмотря на то что данная тема кажется довольно проблематичной, я постараюсь заинтересовать вас, также как вдохновить на изучение чего-то большего.


Сделайте первый шаг

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

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


Постигая основы: ваш первый HTML файл

Важно понять, что такое HTML, так что вот вам определение со страницы World Wide Web Consortium (W3C) - организация, которая работает не покладая рук над разработкой веб-стандартов:

HTML - язык для публикации веб-контента.

Это пожалуй всё определение. Это было просто не правда-ли? С HTML (HyperText Markup Language) вы можете создавать документы, готовые для публикации в сети. Хорошо написанная HTML разметка отвечает за структура контент в документе. Вы можете указать какие части документа должны быть заголовками, какие параграфами, обозначить отношение одного кусочка контента к другому и даже задать простое динамическое поведение.

Тем самым, давайте начнём создавать первый HTML файл. Вам нужен будет текстовый редактор (такой, как TextEdit на OS или на Windows Notepad). После чего:

  • Создайте новый файл
  • Добавьте какой-нибудь текст (к примеру классический "Hello world").
  • Сохраните файл на вашем компьютере, допустим, как "index.html) (.html расширение очень важно здесь, но думаю вы уже поняли об этом).

Теперь нам понадобится вторая программа - веб-браузер. На данный момент на рынке несколько основных игроков, вы можете использовать Internet Explorer, Google Chrome, Firefox, Safari или Opera (существуют и другие), ваш index.html будет открываться в браузере, который установлен по умолчанию.

Когда браузер понимает, что имеет дело с .html файлом, он обрабатывает контент, как HTML. На данный момент у нас нет правильного HTML кода в нашем файле, но браузеру это не так важно - наличие файлового разрешение .html, вполне достаточно. Мы написали одну строку текст, но посмотрите, как браузер обрабатывает данный файл:

Не обращайте внимание на окно для отладки на данный момент, сейчас оно нужно исключительно для демонстрации.

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


Постигая основы: HTML теги

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

Помимо такой вещи как декларация doctype, мы используем html тег в начале нашего документа, после, чего мы заканчиваем наш документ соответствующим закрывающим тегом.

Видите слеш в конце второго тега? Данный слеш и является признаком закрывающего тега. Всё, что мы поместим между открывающим и закрывающим тегами наш HTML документ. Это первый принцип пары HTML тегов, они оборачивают какой-либо контент. К примеру эти два тега оборачивают контент параграфа:

Хорошо, ещё раз вернёмся к нашему первоначальному index.html файлу, далее. я обещаю, мы разберёмся с обучающими ресурсами. Вы заметили, как html теги оборачивают остальные теги? Это называется вложение (nesting). Теги могут оборачивать другие теги. После чего, вложенные теги могут оборачивать ещё больше тегов и данное вложение может продолжаться до бесконечности. Представьте матрёшку.

Тем самым мы можем создать секции веб-страницы, шапку (header), в которой, к примеру, находятся заголовки и горизонтальная черта. Параграфы со ссылками и текстом. Футер со списком ссылок. Обычно это является основой HTML структуры.

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


Задание 1: ознакомьтесь с курсом для новичков

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

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

Следите за вашим продвижением, по мере обучения
  • Tuts+ Премиум, Выучить HTML и CSS за 30 дней - серия скринкастов с Jeffey Way. Выделите десять - пятнадцать минут в день, в течении месяца, для просмотра небольших видео роликов. Как говориться в данном курсе "каждый имеет право научиться создавать что-нибудь замечательное в интернете".

Jeffrey объяснит вам все основные аспекты HTML

Задание 2: выберите текстовый редактор

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

Ключевые преимущества использования специальных редакторов кода:

  • Подсветка синтаксиса: тэги отображаются одним цветом, контент другим, комментарии и другие аспекты HTML разметки также имеют отличные цвета, тем самым документ визуально выглядит гораздо чище. Большинство редакторов предоставляют разнообразие цветовых схем, которые можно выбрать: тёмный текст на светлом фоне, светлый текст на тёмном фоне, некоторые из них довольно привлекательны, некоторые... не очень. Часто, активные участники сообщества создают собственные цветовые схемы. Вам остаётся лишь найти ту, которая придётся вам по душе.
  • Автодополнение кода и подсказки: Какой тэг стоит использовать для заголовка таблицы? Я всегда забываю. К счастью, большинство редакторов кода предоставляют подсказки и необходимый синтаксис, как только вы начнёте печатать. Некоторые из них также показывают документацию по языку, тем самым вы быстро сможете найти детали, столкнувшись с непонятной проблемой.
  • Менеджмент проектов: доступ ко всем имеющимся файлам, окажется невероятно удобной функцией во время создания веб-проекта. Большинство редакторов покажут структуру проекта, позволяя вам изучить каждый каталог, проверить все ресурсы и быстро управлять файлами.
  • Нумерация строк: небольшое преимущество перед обычным текстовым редактором, но иметь возможность определить какая строка, под каким номером, помогает невероятно, особенно при поиске ошибок.

По мимо этого вы найдёте и другие полезные особенности, но большинство из них станут для вас очевидны, лишь после того, как вы начнёте писать больше кода. Так что же вам следует выбрать? Вот несколько вариантов:

  • Sublime Text 2 $59. Вероятно самый популярный выбор среди разработчиков на сегодняшний день, вокруг Sublime Text 2 образовалось огромное сообщество, пожалуй это и является его главным достоинством. Обратите внимание на бесплатный премиум курс Tuts+ - идеальный рабочий процесс с Sublime Text 2.
  • Coda 2 $75. Только для OS X, к сожалению, тем не менее достаточно популярный редактор. Относительно давно мы разобрали взаимодействие с данным редактором в Улучшаем свою продуктивность: хитрости при работе с Code на Webdesigntuts+.
  • Редактор с открытым исходным кодом Brackets. Инструмент от Adobe поддерживающий стандарты HTML, CSS и JavaScript; сам редактор также был создан благодаря данному набору технологий. Редактор вышел совсем недавно, но обладает большим потенциалом и использует интересные подходы к некоторым аспектам касающимся интерфейса.
  • TextMate $53. Опять же только для OS X, уж извините, несмотря на это долгое время является любимым редактором code junkies.

Больше информации о доступных текстовых редакторах можно найти, ознакомившись с Путеводитель для веб-дизайнера по приложениям для работы с кодом и 18 отличных IDE для Windows, Mac и Linux.


Задание 3: создайте что-нибудь!

Настало время применить недавно полученные знания на практике. Попробуйте реализовать структуру HTML разметки следующих вещей:

  • Пустую HTML страницу: звучит не очень интересно, но создание пустой страницы, познакомит вас со стандартным HTML документов и его компонентами. Помните !doctype, <html> тэг и <body>. Познакомьтесь с тэгом <head> и всем его содержимым: <title>, <meta> тэги, а также <link>.
  • Статью для блога: относительно типографии, статья может обладать большинством важных элементов HTML разметки. Начиная с самого <article>, заголовок <h2>, <p> тэг само собой, возможно с <em> тэгами для придания тексту значимости, акцента или же <strong> текст. Вы можете даже добавить менее популярную разметку, такую как <blockquote> и горизонтальную линию <hr>.
  • Иконки для портфолио: немного сложнее теперь, но не забывайте; вы не добавляете стили к этому, мы пробуем лишь построить структуру и основные конструкции, как можно более чистым и логическим образом. В этом упражнение можете использовать неупорядоченный список <ul>, с элементами списка <li>, которые будут представлять из себя каждую иконку. В каждой иконке будет находиться изображение <img src="" alt=""> (тем самым вы научитесь пользоваться атрибутом src) обёрнутое в <a href=""> ссылка, которая открывает большую версию изображения. Вам понадобиться много вложения в этом случае.

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

Проверьте свою работу

После того как вы создали что-либо с использованием HTML, настало время проверить это. Отправляйтесь на validator.w3.org и проверьте код на наличие ошибок с помощью валидатора.  Не так важно, если разметка не на 100% валидна, тем не менее старайтесь получить зелёный результат.

Бонус!

После того как вы почувствуете себя уверенным в создании данных конструкций, предлагаю вам начать работать с настоящим дизайном. Изучите структуру дизайна и представьте, как сформировать разметку.


Статья от Brijan на dribble

Задание 4: изучите разметку

Это важно научиться тому, где какой элемент использовать.

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

Важно понимать где использовать элементы, не для стилизации, но для описания, структурирования контента на вашей страницы. Это называется - семантика.

Если часть текста должна быть параграфом на вашей странице, воспользуйтесь тэгом <p>. Не стоит использовать <div>, к примеру. Семантическая разметка делает ваши страницы более эффективными, более доступные для браузеров, скринридеров, поисковиков - даже для других всевозможных устройств, которые пока не изобрели! Позаботьтесь о том чтобы ваш контент был описан соответствующим образом и вы сделаете веб чуточку лучше, поверьте мне.

Вот несколько надёжных ресурсов, объясняющие как правильно применять HTML элементы:

  • html5doctor.com совместный проект множества очень умных представителей индустрии, поясняет как правильно использовать семантический HTML.
  • HTML Elements от Mozilla. Возможно вы заметили небольшую иконку 5 рядом с некоторыми элементами. Это означает, что элемент был недавно добавлен в спецификацию HTML, на данный момент известную, как HTML5.

Задание 5: прочитайте книгу

Хорошая книга в вашем распоряжении всегда будет неплохим справочником или (что неудивительно) неплохо будет прочитать её от корки до корки. На этом этапе путешествия в мир HTML, могу порекомендовать несколько хороших справочников:

  • HTML и CSS дизайн, создание веб-сайтов - стоит того чтобы приобрести её, отличное качество по сравнению с многими, другими книгами.
  • Декодинг HTML5 от Rockable Press - книга взгляд изнутри на работу и политику разработчиков HTML стандартов. 
  • HTML5 для веб-дизайнеров от A Book Apart - если вы до сих пор не обладаете книгами от A Book Apart, самое время приобрести одну из них.
  • Знакомство с HTML5 под авторством Bruce Lawson и Remy Sharp - относительно сложная информация о том, что может предложить HTML5, но это одна из HTML книг, на которую действительно стоит обратить внимание.

Задание 6: примите участие в жизни сообщества

Это пожалуй лучшая часть, на тот случай если вы являетесь профессиональным веб-разработчиком: сообщество. Когда у вас есть вопрос или проблема, всегда найдётся кто-то, готовый вам помочь, кто-то, кто сталкивался с этим прежде. Так чего же вы ждёте? присоединитесь к форуму креативного сообщества, спросите о помощи и помогите советом, если вы чувствуете, что разбираетесь в тематике вопроса!

Вы можете принять участие в жизни следующих сообществ:

  • Stack Overflow: лучше техническое сообщество вопросов и ответов, которое можно найти. Вы учите HTML? Для вас уже создано несколько веток для обсуждения...
  • Forrst: отличное место получения креативной и технической рецензии о проектах, над которыми вы работаете. Попасть сюда можно только по приглашению, но не унывайте, кто-нибудь обязательно предоставит его вам..
  • GitHub: открытый, онлайн репозиторий для хранения версий вашего кода, GitHub позволяет вам научиться, изучая работу других людей. Множество проектов на GitHub довольно продвинутые для HTML новичка, тем не менее запомните данный веб-сайт, на будущее.
  • Creattica: онлайн сообщество для креативных разработчиков. Оставьте или получите отзыв относительно последних HTML проектах, в которых вы принимали участие.

Помимо данных сообществ, социальные сети отличный способ общаться с вашими HTML героями, задавайте вопросы и предлагайте свою точку зрения. Вот несколько Twitter аккаунтов, посвящённых HTML, на которые стоит подписаться:


Задание 7: ускорьте рабочий процесс при написании разметки

Теперь вы должны понимать, что представляет из себя HTML, какие элементы используются на данный момент, как структурировать семантическую разметку, кто является авторитетным представителем индустрии, так давайте же перейдём к следующему заданию! Следующим логическим шагом будет фокус на CSS; стилизация для HTML разметки, в изучении который вы уже преуспели. Но для начала давайте узнаем, можем-ли мы как-либо ускорить рабочий процесс, рассмотрим несколько альтернативных подходов..

Markdown

Markdown позволяет писать читабельный и легкий в написании обычный, текстовый формат.

Markdown более читабельный способ написания HTML разметки. Значительно упрощает код тэгов, предоставляя более простой синтаксис. После того, как вы создали Markdown документ, обработайте его парсером (к примеру Dingus) для получения привычного HTML.

Для примера, мы уже знакомы с тэгами заголовков HTML:

Эквивалент Markdow будет выглядеть следующим образом:

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

Markdown с каждым днём становится всё более популярным, соответственно в большинстве редакторов кода и системах управления контентом реализована интеграция с данным языком. Для написания веб-контента такой функционал просто идеален. Взгляните на страницу с описанием синтаксиса для деталей или наш туториал Быстрое написание документации используя Markdown.

Emmet

Emmet ускорят написание разметки, парся и конвертируя аббревиатуры в коде. К примеру, вместо того, чтобы писать вручную:

Можно воспользоваться аббревиатурой:

Emmet (прежде известный, как Zen Coding) набор инструментов веб-разработчика, способный невероятно улучшить HTML и CSS рабочий процесс:

Это означает "в результате получим div, содержащий неупорядоченный список, который содержит четыре пункта".

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

Emmet можно использовать в различных редакторах кода, взгляните на Улучшение продуктивности: хитрости при работе с Zen Coding и 7 Потрясающих хитростей Emmet, которые сэкономят время, чтобы узнать подробности и начать работу с этим инструментом.


Заключение

Следуя данному плану и ознакомившись со всеми перечисленными ресурсами вам не составит труда добиться успеха в понимании HTML. Изучение нового навыка откроет для вас новые возможности и кто знает куда это вас приведёт?

Следующий шаг: Теперь у вас есть навык владения HTML в вашем арсенале, взгляните на Лучший способ изучения CSS.

Любые пожелания приветствуются - оставляйте их в комментариях!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.