На этом занятии мы узнаем о разных языках програмирования, попробуем сделать первую страничку в html, пощупаем разные среды разработки.
Результатом будет простая веб-страница.
Зачем быть веб-программистом?
Веб-программисты на сегодняшний день - одна из самых высокооплачиваемых вакансий в мире.
На состояние 18.07.2022 зарплаты веб-програмистов варьируются от 50 000 рублей до 450 000 рублей. Работать можно удаленно из любой точки мира на Россию или другие страны. Работать можно по найму, можно работать на заказ. График довольно либеральный.
Из требований только наличие компьютера и желание постоянно разбираться в технологиях.
По опыту обучения разработчиков, можно смело сказать, что выполнять боевые платные задачи новичок способен уже через месяц. Через пол года работы "начинающим" программистом, можно уже баллотироваться на более-менее высокооплачиваемые должности в 80-120 000 рублей/мес. Если суммы не достаточно, то никто не мешает дополнительно в свободное от работы время выполнять сторонние заказы или устроиться на 2 работы по графику, чтобы одна с другой не пересекалась. Автор в тяжелые времена умудрялся работать на 4 проекта. Оплата довольно хорошая в сумме, скорость развития и познания технологий - космическая, но график - ад.
Как пользоваться этим курсом?
Вводный курс рассчитан на полного нуля, который хочет стать веб-программистом. Вы можете самостоятельно совершенно бесплатно пользоваться этими статьями и все сделать сами. Никаких ограничений нет.
Также вы можете общаться с нашей командой и у вас будут персональные занятия, будете получать быстро ответы на ваши вопросы, мы поможем найти работу и будем помогать выполнять рабочие задачи и развиваться на новом месте.
Урок 1. Языки программирования
Существует множество языков программирования.
В веб используются, как самые популярные, следующие языки:
Javascript, PHP.
Backend, Fontend и Full-Stack
Выделяется 2 основных направления: Backend и Frontend.
В двух словах: Backend - это серверная часть, Frontend - это та, которая у тебя на экране компьютера, телефона, планшета, магнитолы в машине, экрана телевизора или холодильника.
Разработчики также есть Backend, Frontend. Но есть и Full-stack - это те, которые умеют и то, и другое. На самом деле, мы будем изучать и те, и другие технологии, но потом уже поймем, что тебе более интересно и что больше подходит.
На самом деле, в веб используется намного больше языков:
Python, GoLang, Ruby, Kotlin, Java (не путать с Javascript - это разные языки), C, C++, C#.
HTML, кстати, не язык - это просто разметка текста.
CSS - это способ описать стиль веб-страницы (какие рамки, какой фон, какой текст и т.д.)
Мы в процессе обучения попробуем все эти языки. Мы попробуем сделать и веб-страницу, и веб-сервер, и десктопное приложение, и даже мобильное приложение для телефона.
Также есть базы данных: в них хранится вся информация.
Самая популярная в вебе - это mySQL. Также есть PostgreSql, Clickhouse, MongoDB, Redis, Oracle, MsSQL и много других.
Какой язык программирования выбрать?
Технологий много. Отсюда возникает вопрос: что учить, с чем работать? Мы в процессе обучение пощупаем все и наглядно поймем что и для чего нужно. Нужно уловить одну важную мысль: каждая технология подходит для своей конкретной цели. Php прост и быстр для разработки серверных веб-приложений, Javascript фактически чуть ли не единственный вариант для разработки фронт-енд приложения сайта, на нем также можно писать и серверное приложение, базы данных также каждая подходят для своей цели.
Мы будем разбираться таким образом:
Посмотрим поверхностно следующие языки и технологии:
- html - попробуем запилить простейшую веб-страничку со стилями.
- css - как раз попробуем поработать со стилями
- javascript - попробуем сделать простейшее front-end приложение
- php - попробуем поднять свой сервер в docker, настроить его и сделать простейшее backend-приложение
- mysql - мы попробуем сделать простейшую базу данных, в которой будем хранить информацию в нашем приложении.
IDE
Первое, с чем мы разберемся: разные IDE. IDE - это интегрированная среда разработки. Мы в ней пишем код, загружаем файлы на сервер, работаем с базой данных и т.д. и т.п. Мы посмотрим аж целых 3 разных.
- PhpStorm - разработка компании JetBrains. Семейство Intellij Idea. Платный, крутой.
- VsCode - разработка компании Microsoft. Бесплатный, довольно популярный.
- Atom - Бесплатный, крутой, но наворотов меньше, чем у первых двух. Но тоже его посмотрим.
PhpStorm
Подсказка по установке phpstorm, если вдруг сложно было найти, где кнопка скачивания.
PhpStorm платный. Мы будем использовать 30 дней бесплатную пробную версию.
С него и начнем. Запускаем phpstorm.
При запуске PhpStorm спросит про лицензию - выбираем Start Trial
PhpStorm - это на пальцах текстовый редактор такой же как блокнот, Word - но в нем удобно писать код.
В phpstorm нужно создать новый проект. HTMLHelloWorld
После запуска PhpStorm нажимаем «New Project»
В окне создания нового проекта выбираем:
- тип проекта - PHP Empty Project,
- папку (вместо untitled вводим HelloWorld)
- нажимаем Create - создаем проект.
HTML. Первая веб-страница
Мы начинаем с HTML. HTML - это язык гипертекстовой разметки. Это не язык программирования. С его помощью мы объясняем браузеру, телефону или компьютеру, в каком месте, каким образом отображать тот или иной элемент (текст, изображение, видео)
Создаем новый html-файл с названием index.html
К слову, есть разные форматы html: 5, 4 html 5 - это новый современный, 4 - старый. Мы, разумеется, используем 5
По поводу имен файлов. index - это основной, главный файл. Поэтому так и называют всегда первый файл.
Должен появиться вот такой файлик
В качестве браузера для ведения разработки будем использовать Google Chrome.
Если он не установлен, то нужно установить.
Вот ссылка для скачивания:
https://www.google.com/intl/ru_ru/chrome/
PhpStorm нам уже создал html-файл по шаблону. Подробнее опишу, что там написано
<!DOCTYPE html>
Это описание типа документа
<html lang="en"> </html>
Основной тег html - в нем находятся все остальные
В нем указан атрибут lang со значением eng - обозначает, что язык документа английский
Внутри тега html идут следующие теги:
<head></head>
Заголовок файла. Здесь указываются мета-теги, описательная часть документа, стили
<meta charset="UTF-8">
Мета-тег, обозначающий кодировку документа. У нас UTF-8
Бывают разные кодировки на разных языках. Иногда открываешь сайт или текстовый файл, а там вместо текста вопросы, непонятные иероглифы или набор символов. Часто это из-за того, что документ открыт в неверной кодировке
Давно уже весь мир переходит на UTF-8 - эта универсальная кодировка, которая работает у всех.
Подробнее рекомендую погуглить. Либо вот статья для примера
https://habr.com/ru/post/158895/
Сюда вместо TITLE напишем Hello World HTML
<title>Hello World HTML</title>
Тег <body></body> Собственно, здесь основной контент страницы.
Впишем туда заголовок и новый параграф с текстом
<h1>Hello HTML</h1> <p>My first html page</p>
У нас получится вот такой документ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Hello World HTML</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>My first html page</p>
</body>
</html>
У нас получилась наша первая веб-страница. Поздравляю.
Попробуем открыть ее в браузере (Браузер - это приложение, которое открывает сайты, веб-страницы. Это Chrome, Firefox, Safari и прочие)
Нужно найти наш файл на диске. Для этого в phpStorm выбираем Open in Finder (В Windows Open in -> Explorer)
Путь к файлу также показан в строке справа от названия проекта
Открываем наш файл в Chrome
В MAC OS так:
В Windows так:
Должна получиться примерно такая веб-страница
Обратите внимание, что также в Chrome или Firefox эту страничку можно открыть прямо из phpStorm. Но есть разница. В первом случае, если мы открываем файл напрямую, Firefox открывает файл с диска. Во втором случае, если мы жмем на кнопку в PhpStorm, то создается временный веб-сервер, через который этот html-файл выдается браузеру. Нам для нашего случая интересно попробовать и тот, и другой способ
Поздравляю. Мы сделали первую веб-страницу
Теперь посмотрим, как тоже самое будет выглядеть в других IDE: ATOM и VSCODE
VSCode
Запускаем VsCode
Жмем "открыть папку»
Открываем папку нашего проекта
Может спросить вот такое: жмем "Доверяю"
Откроется наш проект. В нем должен быть один файл: index.html - открываем этот файл
В целом все тоже самое.
Попробуем поправить нашу веб-страничку.
Понабиваем разный текст.
Чтобы не изобретать текст, есть специальный сайт Lorem Ipsum (латынь), где есть заготовки текстов-рыб как раз для наполнения демо-контентом.
Страницу можно промотать немного вниз - там будет кнопка Generate - жмем на нее.
Сгенерируется 5 абзацев текста
Заменим заголовок на Lorem Ipsum
<title>Lorem Ipsum</title>
Вместо нашего параграфа вставим параграф из Lorem Ipsum
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis efficitur urna, quis lacinia velit finibus quis. Aliquam efficitur turpis id neque imperdiet sollicitudin. Fusce feugiat leo sed risus iaculis, et faucibus neque sodales. Duis nulla neque, convallis eget posuere non, tempus sed felis. Nullam egestas euismod elit maximus vestibulum. Vestibulum orci orci, dapibus non magna euismod, maximus consequat ligula. Fusce eu magna eget nibh molestie bibendum eget vel ligula. Donec enim nisl, pulvinar ac turpis nec, consectetur porttitor tellus. Vestibulum arcu enim, tempus eu malesuada in, suscipit vitae dolor. Mauris tincidunt diam quis dui commodo eleifend. Nullam et porta nibh, sit amet dictum nulla.</p>
Посмотрим, что получилось: для этого достаточно просто обновить страницу в Chrome.
Напомню, что чтобы открыть файл в Chrome, нужно проделать следующее:
- Найти его в Finder (Explorer в Windows)
- Нажать на файл правой кнопкой и выбрать открыть с помощью Chrome
Получилась вот такая веб-страничка
В целом круто. С vsCode все понятно. Такой же вполне себе крутой редактор, как и phpstorm
Atom
Запускаем Atom
Заходим в папку нашего проекта и жмем Open
Далее открываем наш файл index.html
Попробуем добавить пару заголовков и еще пару абзацев
Под нашим параграфом добавляем еще один заголовок
<h2>Cras nec neque erat</h2>
Под ним еще один параграф:
<p>Cras nec neque erat. Vivamus at tincidunt turpis. Aliquam odio sapien, posuere vel orci vitae, dapibus convallis diam. Donec tempus magna diam, vitae malesuada magna pulvinar in. Fusce efficitur, enim nec posuere porta, urna risus tempus erat, in convallis risus lectus ac diam. Aliquam convallis, mi id porta fringilla, metus justo pellentesque justo, ut convallis dui quam eu lorem. Praesent vitae urna risus. Sed eu porttitor ex. Fusce interdum massa consequat, tristique lorem ornare, semper nisi. Aliquam sed dignissim nisl.</p>
Важный момент: когда пишешь код, старайся при открытии тега сразу его закрывать, то есть если пишешь <p>, то сразу за ним пиши </p>, а потом уже пиши код внутри. Еще раз: сначала <p></p> Потом внутри код: <p>текс текст текст </p> Это хорошая практика - поможет избежать ошибок, когда забываешь закрывать теги, скобки, кавычки и прочее.
Ну и для закрепления, давай добавим еще один заголовок 2-го уровня и параграф
<h2>Morbi vitae pretium libero</h2>
<p>Morbi vitae pretium libero. Donec eu hendrerit turpis. Donec consectetur cursus orci id convallis. Fusce eget quam volutpat, ullamcorper sapien vel, faucibus ante. Aliquam in venenatis erat. Aenean porttitor urna eu sem luctus mattis. Vestibulum dui dolor, vestibulum at commodo id, iaculis sit amet dui. Fusce congue tortor in scelerisque interdum. Ut ac tortor in ante maximus euismod eu pharetra risus. Vivamus convallis turpis ut urna volutpat, ac fermentum massa feugiat. Donec in odio felis.</p>
По поводу заголовков: Заголовки бывают разного уровня: 1,2,3,4,5,6. Согласно правилам, уровни должны идти последовательно. Заголовок уровня 1 - главный заголовок на странице, он должен быть один, внутри его может быть только заголовок уровня 2, а внутри 2 - уже заголовки уровня 3. Заголовков 2-6 уровня может быть сколько угодно. Собственно, работать-то все будет и отображаться будет все как написано, но это не правильно.
Интересный момент: в Atom нужно сохранить файл вручную, а в phpstorm и vscode они сохраняются автоматически.
Сохраняем файл и обновляем страничку в Chrome - смотрим, что получилось
У меня получилась вот такая страница.
На всякий случай прикрепляю ее здесь, если вдруг мы где-то разошлись.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lorem Ipsum</title>
</head>
<body>
<h1>Hello HTML</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer mattis efficitur urna, quis lacinia velit finibus quis. Aliquam efficitur turpis id neque imperdiet sollicitudin. Fusce feugiat leo sed risus iaculis, et faucibus neque sodales. Duis nulla neque, convallis eget posuere non, tempus sed felis. Nullam egestas euismod elit maximus vestibulum. Vestibulum orci orci, dapibus non magna euismod, maximus consequat ligula. Fusce eu magna eget nibh molestie bibendum eget vel ligula. Donec enim nisl, pulvinar ac turpis nec, consectetur porttitor tellus. Vestibulum arcu enim, tempus eu malesuada in, suscipit vitae dolor. Mauris tincidunt diam quis dui commodo eleifend. Nullam et porta nibh, sit amet dictum nulla.</p>
<h2>Cras nec neque erat</h2>
<p>Cras nec neque erat. Vivamus at tincidunt turpis. Aliquam odio sapien, posuere vel orci vitae, dapibus convallis diam. Donec tempus magna diam, vitae malesuada magna pulvinar in. Fusce efficitur, enim nec posuere porta, urna risus tempus erat, in convallis risus lectus ac diam. Aliquam convallis, mi id porta fringilla, metus justo pellentesque justo, ut convallis dui quam eu lorem. Praesent vitae urna risus. Sed eu porttitor ex. Fusce interdum massa consequat, tristique lorem ornare, semper nisi. Aliquam sed dignissim nisl.</p>
<h3>Cras et feugiat libero</h3>
<p>Cras et feugiat libero, in sagittis orci. Curabitur vel erat viverra, porttitor mi sed, efficitur lacus. Sed ac suscipit nunc, vitae eleifend felis. Quisque blandit vehicula iaculis. Sed congue purus velit, eget dictum sem posuere id. Donec nibh est, aliquam a elementum vel, vulputate quis massa. Nam eleifend et neque a condimentum. Cras imperdiet, metus eu mollis efficitur, est lectus iaculis velit, quis tempus ipsum ligula ac orci. Etiam sem elit, porttitor at urna sit amet, molestie gravida lectus. Vivamus pulvinar sit amet libero sed fringilla.</p>
<h2>Morbi vitae pretium libero</h2>
<p>Morbi vitae pretium libero. Donec eu hendrerit turpis. Donec consectetur cursus orci id convallis. Fusce eget quam volutpat, ullamcorper sapien vel, faucibus ante. Aliquam in venenatis erat. Aenean porttitor urna eu sem luctus mattis. Vestibulum dui dolor, vestibulum at commodo id, iaculis sit amet dui. Fusce congue tortor in scelerisque interdum. Ut ac tortor in ante maximus euismod eu pharetra risus. Vivamus convallis turpis ut urna volutpat, ac fermentum massa feugiat. Donec in odio felis.</p>
</body>
</html>
Закрываем Atom
Итак, подведем промежуточные итоги:
1. Мы создали нашу первую веб-страничку на HTML
2. Мы посмотрели три разных IDE (редактора кода): phpStorm, vsCode, ATOM
На следующем занятии мы более детально поработаем над нашей веб-страницей, вставим изображения, добавим текст, заголовки, таблицу, сделаем структуру, пощупаем стили.
Ссылка на следующе занятие:
Вопросы и предложения пишите в комментариях.
Если что-то не понятно и нужна помощь - пишите в Телеграм в @srmt22
Обязательно поставьте лайк, если дочитали до конца
