Обучение чему-то новому, сначала может оказаться опасным занятием; откуда начать, кого слушать, кого не стоит слушать — процесс может неимоверно усложниться. Поэтому я и решил написать этот пост. Это поможет вам распланировать что учить и в каком порядке, как начать обучение, несмотря на то что данная тема кажется весьма проблематичной, я постараюсь заинтересовать вас, также как вдохновить на изучение чего-то большего!
Сделайте первый шаг
Это пожалуй самая важная часть любого процесса обучения — как только вы поставили себе цель выучить новый навык, новую тему, вы на правильном пути и первый шаг к успеху уже сделан! Возможно вы дизайнер и хотите попробовать что-то кроме ручки, бумаги и Photoshop, даже если до этого вы не занимались веб-разработкой, это не имеет значения. Сейчас вы хотите научится создавать веб-страницы с помощью ресурсов перечисленных ниже, вам не составит труда понять, как работает HTML.
Мы начнем с того, что поговорим об основах 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 достаточно детальные, кроме теоретической части, всегда есть возможность испытать свои навыки на практических примерах. По мере получения очков и наград, сложность задач возрастает, до всего этого вы будете получать уведомления по емейл, которые помогут вам не лениться и сфокусироваться на обучении.