Итак, перед тем, как начать какое-либо обучение, сделаю небольшую ремарку.
Материалы, представленные в этой статье, написаны лично автором и не являются истиной в последней инстанции. Цикл статей будет рассчитан на посетителей, которые хотят окунуться в мир front-end, визуализированный таким же обычным человеком, как они сами. Я всё так же ратую за обучение на специализированных ресурсах и/или курсах, и при этом хочу выразить свою точку зрения. Огромное спасибо, что посетили мой канал :)
Начинаем обучаться :)
Почему мы начинаем с HTML?
Как я писал ранее, HTML - базовый язык, который нам необходимо знать и, что немаловажно, понимать. Front-end разработчик работает, по существу, с тремя основными языками - HTML, CSS, JavaScript, и они расположены здесь именно в порядке изучения.
Нам понадобится:
- Редактор кода. Конечно, мы можем воспользоваться стандартными средствами (например, блокнот), но человечество уже давно придумало специализированные ресурсы для удобной разработки (приятно уже начинать чувствовать себя разработчиком, неправда ли?). Лично я пользуюсь редактором Sublime Text 3. Вы можете поискать в Интернете более удобные для вас приложения.
- Мотивация и подготовленный мозг. Очень важно очистить разум перед любым обучением ;)
Всё, можем начинать! Будем пользоваться последней версией языка, HTML5.
--------------------------------------------------------------------------------------------------
Итак, как я уже упоминал, HTML - язык разметки гипертекста. Вся его суть заключается в следующем: мы размечаем страницу, помещая в нужные нам места некоторые элементы (картинки, ссылки, текст, таблицы, списки...), и в итоге всё выглядит опрятно, культурно и приятно.
Чистый HTML - это, конечно, моветон. На нём писали сайты, примерно, до середины 2000-х годов - я сейчас веду речь об обычных пользователях. Помните сайты на сервисе narod.ru? Вот это яркий пример.
Основные элементы HTML называются тегами. Даже не основные, а единственные :) Запомнить их правописание очень просто, смотрите:
<тег>Текст</тег>
Что здесь произошло? Мы открыли тег (то есть дали компьютеру и браузеру информацию с помощью элемента разметки - тега - что здесь нужно разместить некую информацию с присущими тегу свойствами), вложили в тег, например, текст, и закрыли тег - всё, браузер понял, что действие тега прекратилось. Вложенные данные обрабатываются компьютером на основании уже самого тега и его свойств.
Просто? До ужаса!
Сразу отмечу, что теги бывают двух видов - парные и одиночные. Парные, как вы уже успели понять, имеют открывающую и закрывающую часть, а одиночные - только открывающую.
Итак, вывод: с помощью тегов мы размечаем веб-страницу, и на выходе получаем уже готовый документ.
Попробуйте в редакторе кода написать следующее:
<b>Привет, мир!</b>
Затем сохраните документ, назвав его index.html (почему именно так - разберем в следующих уроках), и откройте в браузере.
Мы увидим жирный текст, но не увидим тегов! Мы разметили страницу, передав браузеру и компьютеру информацию: здесь будет текст "Привет, мир!", который следует сделать жирным. Всё просто!
Существует несколько основных тегов, позволяющих "играть" с текстом самыми разными способами.
Парный тег <b> - делает текст жирным.
Парный тег <i> - делает текст курсивным.
Парный тег <u> - подчеркивает текст.
Парный тег <s> - вычеркивает текст.
Парный тег <p> - текст, вложенный в этот тег, создаст абзац (с переходом на новую строку автоматически).
Одиночный тег <br> - перенесет следующий текст/элемент на новую строку.
Итак, первое домашнее задание.
Возьмите из интернета (или из головы) любой кусок текста, вставьте его в редактор кода и поиграйтесь с этими тегами. Не забывайте сохранять документ и обновлять страницу браузера (F5), чтобы видеть изменения и результат.
Поздравляю вас с началом обучения! Жду первые вопросы в комментариях.
Удачи!