Кращий спосіб вивчення HTML

Навчання чогось нового, спочатку може виявитися загрозливим заняттям; звідки почати, кого слухати, кого не варто слухати - процес може неймовірно ускладнитися. Тому я і вирішив написати цей пост. Це допоможе вам розпланувати що вчити і в якому порядку, як почати навчання, незважаючи на те що дана тема здається досить проблематичною, я постараюся зацікавити вас, також як надихнути на вивчення чогось більшого!

Зробіть перший крок

Це мабуть найважливіша частина будь-якого процесу навчання - як тільки ви поставили собі за мету вивчити новий навик, нову тему, ви на правильному шляху і перший крок до успіху вже зроблений! Можливо ви дизайнер і хочете спробувати щось крім ручки, паперу і 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, на жаль, проте досить популярний редактор. Щодо давно ми розібрали взаємодія з даними редактором в Покращуємо свою продуктивність: хитрощі при роботі з Coda на Webdesigntuts+.
• Редактор з відкритим вихідним кодом Brackets. Інструмент від Adobe який працює в стандарті HTML, CSS і JavaScript; сам редактор також був створений завдяки даному набору технологій. Редактор вийшов зовсім недавно, але має великий потенціал і використовує цікаві підходи до деяких аспектів стосуються інтерфейсу.
• TextMate $53. Знову ж тільки для OS X, вже вибачте, не дивлячись на це довгий час є улюбленим редактором code junkies.

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

Завдання 3: створіть що-небудь!

Настав час застосувати недавно отримані знання на практиці. Спробуйте реалізувати структуру HTML розмітки наступних речей:

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

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

1

<div class="test">

2

  <p>This is the content of the test div.</p>

3

</div><!-- end of test div -->

Перевірте свою роботу

Після того як ви створили щось з використанням 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, на які варто підписатися:

• @html5doctor
• @html5doctor
• @wdtuts що очевидно ..
• @nettuts що також очевидно ..
• @LeaVerou
• @zeldman
• @meyerweb
• @smashingmag

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

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

Markdown

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

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

Для прикладу, ми вже знайомі з тегами заголовків HTML:

1

<h1>This is an H1</h1>

2

3

<h2>This is an H2</h2>

4

5

<h6>This is an H6</h6>

Еквівалент Markdow буде виглядати наступним чином:

1

# This is an H1

2

3

## This is an H2

4

5

###### This is an H6

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

Markdown з кожним днем стає все більш популярним, відповідно в більшості редакторів коду та системах управління контентом реалізована інтеграція з даними мовою. Для написання веб-контенту такий функціонал просто ідеальний. Погляньте на сторінку з описом синтаксису для деталей або наш туторіал Швидке написання документації використовуючи Markdown.

Emmet

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

1

<div>

2

    <ul>

3

        <li></li>

4

        <li></li>

5

        <li></li>

6

        <li></li>

7

    </ul>

8

</div>

Можна скористатися абревіатурою:

1

div>ul>li*4

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

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

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

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

Висновок

Слідуючи цим планом і ознайомившись з усіма перерахованими ресурсами вам не важко буде домогтися успіху в розумінні HTML. Вивчення нового навику відкриє для вас нові можливості і хто знає куди це вас приведе?

Наступний крок: Тепер у вас є навик володіння HTML у вашому арсеналі, погляньте на Кращий спосіб вивчення CSS.

Будь-які побажання вітаються - залишайте їх у коментарях!