Привет, эту серию статей я хочу написать для людей, которые хотят вступить в web IT, но не знают с чего начать. Я понимаю как этот путь сложен, разбегаются глаза что же учить, ведь так всё интересно. Сам был недавно в этой шкуре, но теперь за плечами более 10 проектов, даже есть государственные. Поэтому думаю, что могу подсказать начинающим с чего же начать, ведь хочется видеть больше хороших специалистов в наших рядах. Ну что же, в путь!
Как бы странно это не звучало, но подготовь сначала себя. Изучение frontend-разработки - это тернистый путь, который требует хорошей усидчивости и терпения. Терпение - так вообще самая важное качество, так как день изо дня ты будешь видеть красную консоль, которая будет кричать на тебя "Вот тут ОШИБКА!". На решение которой ты потратишь минут 30 своего времени, а потом обнаружишь, что элементарно не поставил точку с запятой (аж слёзы наворачиваются).
Но что-то я отвлёкся, давай-ка по-быстрому пробежимся по основам:
HTML⚡
Да, я не открою какую-то тайну, что знание HTML - это прям основа основ, которую необходимо знать. Ведь наша работа заключается как красиво подать сайт, чтобы и клиент был доволен и дизайнер не сказал: "Ты что за чушь нагородил? Я ведь другое делал...".
Именно HTML является скелетом нашего сайта. При грамотном расположении блоков можно построить не только отличный каркас, но и передать другим разработчиком (к примеру backend) качественную структуру из которой они смогут делать компоненты для переиспользования (но об этом потом).
Так что же значат эти 4 чудесных буквы H-T-M-L?
HTML - HyperText Markup Language — «язык гипертекстовой разметки»). Но давайте попроще, ок? Мы же не википедию читаем, мы хотим всё это понимать. Как я и сказал, HTML - это каркас сайта, его скелет. Он создаёт определённый контент (текст, блоки, картинки, ссылки), которые в дальнейшем мы можем стилизовать и делать восхитительные сайты.
Давайте наконец-то приступим к коду ✐
Для начала создайте у себя на рабочем столе папку с любым названием. Я предпочту - "realit-basics". Создали? Уже успех. Далее откройте любым редактором кода нашу папку. Я использую VS Code, так как считаю, что он является самым удобным для web-разработки.
Но вы можете использовать и другие редакторы:
В нашей папке "realit-basics" я создаю файл под названием "index.html". Где мы и будем писать наш великолепный код.
Но пока мы не начали делать наш сайт, на первой строчке давайте напишем вот это:
Это необязательно, но является хорошим тоном. Так мы показываем, что наш созданный файл является HTML документом.
Синтаксис ✐
Немного отойду в сторону и разъясню как устроен синтаксис HTML. Всё довольно просто, если честно. У нас есть какое-то название и мы это название оборачиваем в скобки - <название>.
В основном, наши теги (так называются наши блоки) разделены на две части: открытие и закрытие.
Можно увидеть, что в закрывающий тег просто добавляется символ /. Вот и всё.
Начало ✐
Не пугайтесь, что тут всего так много. На то вам и я, чтобы всё разжевать и объяснить.
- <html></html> - это самый главный наш тег. С него начинается наш сайт.
Можно увидеть, что в открывающем теге <html> есть атрибут lang='ru'. Он означает, что наш с вами сайт будет на русском языке. Если бы мы захотели чтобы наш сайт был на английском, то мы бы написали lang='en'. Ну вы поняли.
- <head></head> - предназначен для хранения других элементов, цель которых — помочь браузеру в работе с данными.
Если коротко, то тег <head> нужен нам для того, чтобы мы в него подключали наши CSS-файлы (наши стили) и прописывали информацию для поисковых роботов, таких как Google и Яндекс.
- <meta charset='UTF-8'> - тут мы устанавливаем кодировку для нашего сайта. То есть чтобы все наши символы на сайте выглядели нормально, а не вот так - è�îê�ÿ ýë�êò�èôè�àö�èÿ.
- <meta name='viewport'> - это нужно для того, чтобы наш сайт выглядел нормально для планшетных и мобильных устройств. Если вы замечали, то большинство сайтов на телефонах и планшетах выглядят иначе, нежели чем на компьютерах. Вот за это и отвечает эта строчка. Можете её просто всегда копировать и вставлять в тег <head>.
- <title>Название</title> - он отвечает за текст в вкладке нашего браузера. Мы можем написать сюда что угодно и это отобразится у нас в вкладке.
И самое вкусное я оставил под конец. Если дочитали до этого момента, то вы достойны похвалы, так как мы добрались до второго по важности тега после <html></html>.
- <body></body> - предназначен для хранения всей информации на странице.
То есть весь контент сайта будем расположен в этом теге. Весь наш код, напечатанный нашими кривыми пальчиками надо писать тут и только тут.
Давайте для примера я вставлю заголовок с приветствием для нашего курса:
Как вы можете увидеть, я добавил вступительный заголовок именно в тег <body></body>. Теперь посмотрим как это выглядите на странице.
Чтобы это сделать зайдите в нашу папку с проектом, выберите наш файлы index.html, нажмите на него правой кнопкой мыши и выберите пункт: "Открыть с помощью" и выберите любой браузер.
Поздравляю, вы только что создали базовую HTML-структуру и добавили заголовок. Почти готовый сайт, звоним в Google.
⭐Итоги⭐
- HTML - это НЕ язык программирования! Это скелет или каркас сайта. Благодаря нему мы добавляем контент на сайт.
- Для того, чтобы начать работать с HTML достаточно создать файл с расширением .html и написать в нём тег <html></html>.
- Базовая структура должна выглядеть примерно так:
Спасибо за уделённое время. В скором времени ждите продолжение курса✌