Веб-девелопмент — пособие для начинающих #

Предисловие #

Свой первый сайт я сделал ещё в 96-м году. Просто скопировав исходники с сайта модного компьютерного журнала и поставив их на свой. Принципиально это не самый плохой способ. Подсмотреть и сделать лучше. Что бы понять как это работает — просмотр чужих примеров просто обязателен.

Последние пару лет слово пример практически не используется в моём IT-круге. Принято говорить кейсы, кейс клиентa, пользовательский кейс. И это важная черта компьютерных разговоров. Очень много англицизмов. Невозможно перевести всю документацию на языки пользователей. Английский как язык технического документооборота принят на многих фирмах, где англичан к примеру никогда и не было, да и команда разработки к примеру - русская. В одной из таких фирм меня шеф бил по рукам за комментарии в коде на русском языке.

Английский #

Это я к тому, что если вы не выучите английский, то шансов стать хорошим разработчиком у вас нет. И мы подошли к главному - для кого это пособие. Сейчас, когда написана только первая глава, я вижу, что книга должна помочь взрослому человеку разобраться в мире веб-технологий. То есть это пособие для меня в прошлом, когда я не знал с чего начинать учить Frontend.

Вполне возможно, что оно поможет и редакторам сайтов, которые не собираются углубляться в веб-строительство, а просто хотят хорошо делать свою работу. Как минимум для вас, моих коллег-редакторов я и сделал обзор тегов HTML и их возможностей. Один раз ознакомиться с этим списком важно для любого человека, который пишет в этом вашем интернете.

Надеюсь это пособие поможет и тебе.

HTML и 2021 год #

Официально интернет пришёл в разные страны по разному.

Национальные доменные зоны #

В 95-м году интернет на территории бывшего СССР стоил больших денег и был скорее доступен сотрудникам научно-технических организаций и студентам высших учебных заведений. В это же время в странах западной Европы и США были уже частные интернет провайдеры, которые предлагали доступ для частных лиц из дома. В Германии на тот момент час “звонка” с модема на модем внутри города стоил около 5 немецких марок(2,5€).

Как мы видим интернет тогда был и на Западе уделом богатых или умных, или умных и богатых. Так он и развивался, медленно, лишь постепенно становясь доступным массовому пользователю и бизнесу. Развиваясь, в нём появлялись деньги, исполнители, знания, новые требования, новые возможности. И он менялся; прокладывались новые линии, придумывались новые языки, библиотеки, методы решения проблем и … снижался порог входа.

То, что мы сегодня называем интернетом очень и очень отличается от того, что называли интернетом в 1994 году.

• HTML5 - сегодняшний стандарт интернета - принят в 2014 году.
• CSS3 - существует с 2000 года.
• React, который используется сейчас чуть ли не на 80% новых сайтов вообще придуман в 2014 году.

Технологии действительно новы и вместе с вами их учат и “бывалые” программисты. Так что это примерно как с правилами дорожного движения. У старых водителей есть опыт, у новых водителей знания. И где-то за два года работы каждый новенький становится стареньким.

Это всё просто #

Нет, серьёзно! Это всё несложно. До определённой степени. Ну так же несложно как писать красивые письма, делать презентации или отсылать письма.

Hypertext Markup Language #

HTML (Hypertext Markup Language) - не язык программирования, а язык разметки. С помощью него нельзя вычислить траекторию полёта, предсказать погоду на завтра или смоделировать поведение человека. Это просто правила отображения текста на экране.

Что мы должны понять и запомнить? C помощью HTML мы указываем параметры текста, что является заголовком, что чужой цитатой, что считать аббревиатурой, а что статьёй. Указателей для текста или правил много, больше сотни. Но все их можно выучить за неделю. С учителем. Без учителя до месяца. Даже мне понадобился всего месяц, что бы с нуля пройти весь HTML5. А мне уже за 40, плохое зрение, одышка и желание учиться новому так себе, на самом деле. Я к чему? — это действительно несложно. Это HTML.

Существует множество способов разметки текста. Ваш простой ворд-файл тоже сохраняется в одной из таких разметок. В этом пособии я коснусь HTML, XML, Markdown. Первых два - общепринятые способы хранения “компьютерных данных”. Markdown — один из самых популярных, на данный момент, способов написания документации. Помимо HTML мы коснёмся достаточно подробно CSS и совсем немного JavaScript, чисто что бы понять, что это такое.

Давайте начнём!

Редактор HTML #

При обучении любой компьютерной технологии первым уроком учат писать Hello World!

Я не могу бросить вызов сложившийся культуре, но первым делом нам придётся выбрать инструменты где мы будем это писать.

Вы можете установить все эти редакторы и перепробовать их по очереди. Работать с ними одновременно или разделить их по языкам. Например, я использую “Visual Studio Code” для написания документации к софту и в нём у меня очень много плагинов. В Webstorm пишу уже непосредственно сайты, а Sublime у меня без плагинов, очень лёгкая и его я запускаю часто вторым редактором. Выберете свой редактор из списка или спросите друзей. Кстати очень неплохой совет. Редакторы в 2019 году достаточно сложны. И настроить для повседневной работы получится далеко не сразу. Лишний совет никогда не помешает. Спросите, чем пользуются ваши друзья.

Рабочая папка и домашняя директория #

Во-первых, давайте создадим папку в которой вы будете работать. Например в домашней директории папку “HtmlLessons”. И уже здесь у вас могло возникнуть два вопроса: что такое домашняя директория и почему не “html-lessons”.

Домашняя директория под Виндовсом обычно c:/users/“имя пользователя” и в компьютерной терминологии обозначается просто значком тилда — “~”, потому что в терминале в неё попасть можно через тилду. Под Линуксом разумеется можно попасть через тилду. Под Виндовсом тилда вызывает домашнюю директорию только в линуксоподобном теминале, например Bash. Который вам тоже придётся рано или поздно поставить, потому что иначе вы не научитесь работать с Git(вы же запомнили слово GitHub вверху?).

Без упоминания слов Linux, Bash, Git стать программистом сложно. По этому лучший совет от меня - выписывать все оставшиеся непонятными слова и искать их в поиске. Языки программирования мало чем отличаются от обычных иностранных языков. Кому-то они даются легко, а кому-то сложно. Если вы из второй категории, то сжимаем зубы и зубрим.

Git #

Вам не надо скачивать и ставить всё это сразу. Но когда первый страх пройдёт, когда вы начнёте разбираться с HTML - вернитесь и попробуйте разобраться с GIT. Мне на это понадобилось несколько попыток. Примерно с пятой я начал разбираться и не вздрагивать при слове Git.

Я не мог не сказать про тилду, линукс, bash-терминал и Git. Уже более чем в половине видеоуроков для начинающих люди показывают всё с маков или линуксов и активно используют “~” не объясняя что это. Это очень важное сокращение, которое я тоже активно буду использовать. Потому что для меня WEB - это мир иксов(Linux, Unix, Mac OS X).

Очень краткая методичка по работе с Git.

Кебаб из верблюдов и змей #

Второй вопрос, который у вас должен был возникнуть почему папка названа большими и два слова не разделены минусом. Вопрос очень хороший. Спасибо Андрей, что задал его. Отвечать будет тоже Андрей.

Линукс различает написание строчных и прописных букв(маленькие и большие), а виндовс нет. И как бы вы не назвали файл или папку, вы должны помнить, что если вы будете хранить бэкап(резервную копию) на своём компьютере, то “одинаковые” файлы могут привести к проблемам. В HTML в принципе стараются писать всё маленькими буквами(строчными) и соединять слова через тире. Для домашнего компьютера я больше предпочитаю “CamelCaseNotation”, когда всё пишется маленькими буквами, без тире, но начальные буквы каждого слова пишут с большой буквы, так принято например в языке программирования Java. Другой вариант написания через “-” называется kebab-case или lisp-case. Всё понятно? Но вы зря расслабились, это ещё не конец. У нас есть Snake case. Это змейка “foo_bar”. Но и это было бы слишком просто. Есть UPPER_SNAKE_CASE и lower_snake_case. Запутались? Давайте табличку сделаем.

Система, которой вы будете пользоваться не имеет большого значения, это скорее зависит от того на какой машине вы работаете и с какими технологиями. Самое главное, что бы вы были последовательными. Иногда это вообще не ваш вопрос, а политика фирмы. Спросите шефа как работает ваша фирма и следуйте указаниям. Порой это требования клиента. И от проекта к проекту настройки могут отличаться.

Возвращаясь к эдиторам. Иногда на фирме есть стандарт, который нельзя нарушать или технически не очень удобно использовать другой.

Convention #

Таких религиозных вопросов в работе будет немало. Обычно для каждого языка есть конвенции(Convention). Конвенция - это свод правил, которые программисты выбрали для данного стэка(технология). Если хотите, своеобразное джентльменское соглашение Запрос “CSS Naming Conventions” выдаёт правила написания кода для CSS, которым вы будете следовать, если дойдёте до главы “CSS - это вооооообще лёхка!”

Домашнее задание #

1. Выбрать один или несколько рабочих браузеров. Установить, если требуется. Например chrome, opera, firefox.
2. Поставить среду разработки. Visual Studio Code, Webstorm или тот который нравится.