Глава 2. Часть 1.
Как уже писал, веб-программирование состоит из двух частей: фронтенд и бэкенд разработки.
Сегодня мы начнем изучение фронтенд-разработки. Напомню, фронтенд-разработка - это всё то, что видит пользователь, когда открывает на своем компьютере сайт и с чем он работает на этом сайте: кнопки, баннеры, анимация, таблицы и другое.
Во фронтенд-разработке используются следующие языки:
- HTML – язык разметки. Он отвечает за то, как будет структурно выглядеть страница сайта, где и в каком месте будут находиться элементы страницы.
- CSS – язык описания внешнего вида. Он отвечает за стилизацию внешнего вида элементов страницы сайта.
- JavaScript (JS) – язык программирования. Он используется для взаимодействия пользователя с элементами сайта.
Изучение мы начнём с языка разметки – html, затем – css и параллельно освоим js.
Помимо вышеназванных языков на уроках по фронтенду мы рассмотрим такие важные вещи, как операционные системы, интернет и протокол HTTP. Познакомимся с терминалом и командной строкой. Научимся работать с системой контроля версий – Git и многое другое.
После того, как максимально освоим фронтенд, возьмемся за изучение бэкенд-разработки.
Главное в обучении - не ограничиваться чтением только моих уроков. Всё что мы здесь будем проходить это лишь база для дальнейшего самосовершенствования.
Для самостоятельной подготовки будут даваться задачи, ответы на которые можно будет найти в следующем уроке.
Ну что же, начнём? Итак, язык HTML.
HTML – язык разметки и состоит из тегов. Все веб-страницы в интернете построены на основе тегов. С помощью тегов мы указываем что конкретно и как именно будет располагаться на странице.
Для наглядности, читая в браузере данную страницу, нажмите у себя в верхней части клавиатуры клавишу F12. Откроется панель разработчика, которую мы будем изучать чуть позже, но сейчас сможете увидеть в разделе «Элементы» код данной страницы. Этот код весь состоит из тегов: <…>….</…>. Вот это и есть язык разметки, на основе которого построена данная веб-страница.
Глядя на веб-страницу сайта, Вы видите заголовки, абзацы, списки, какие-то отдельные блоки, где есть текст и картинки. И всё находится на своём конкретном месте. Как же браузер понимает, что, как и где конкретно надо всё это разместить? С помощью тегов.
Тегов существует чуть больше ста штук. Заучивать специально их не надо. По мере использования они почти все легко сами запомнятся. Вообще, в программировании будет правильным принцип не заучивания, а понимания существования чего-то и при необходимости умение нахождения информации о нём в справочнике. Невозможно всё помнить, но возможно разбираться в вопросе и уметь логически мыслить.
Тег обозначается как <название тега>.
Начинается тег с символа < и закрывается символом >. Внутри тега пишется его название: заголовок, параграф, список и т.д. Но пишется название не русскими буквами, а латинскими.
Теги бывают одиночные и парные. Парные отличаются от одиночных тем, что повторяются два раза <название тега> (здесь какой-то код) </название тега> и во втором теге стоит косая черта, обозначающая, что второй тег закрывающийся. Закрывающийся тег говорит нам о том, что после него весь написанный код к данному тегу отношения никакого уже не имеет.
Между парными тегами размещается код, который пишет программист.
В следующем уроке мы начнём разбирать многие теги и у вас придет понимание вышесказанного, а сейчас затронем еще один важный вопрос – это где, точнее в чём писать код html.
Для написания кода в программировании существует множество приложений – редакторов кода. По мере получения практических знаний Вы сами определитесь с конкретным редактором кода, который наиболее будет подходить для решения именно Ваших задач.
В своих уроках все примеры буду делать в Visual Studio Code. Это мощный редактор с хорошей многоязычной (многоязычность в плане поддержки большого количества языков программирования) поддержкой, удобный в освоении для новичков и постоянно обновляющийся изготовителем данного продукта.
Где скачать и как установить данный редактор на своем компьютере Вы можете найти информацию в интернете.
После установки редактора на компьютере, первое, что необходимо сделать – это установить расширение для русского языка, чтобы меню редактора было на русском языке. Расширение называется Russian Language Pack for Visual Studio Code. После его установки и перезагрузки редактора, практически все пункты меню будут на русском языке.
О других расширениях, которые потребуются при работе с VSCode мы будем говорить по мере изучения уроков.
Считается, что программист должен знать английский язык, но всё зависит от Ваших планов на будущее. Если планируете в дальнейшем совершенствоваться и устроиться на работу программистом в какую-либо компанию, в особенности иностранную, то неплохое знание английского обязательно. Если же в Ваших планах делать самостоятельно только свои проекты, то можно обойтись и без знания английского. В конце концов есть программы перевода текста и ими вполне можно обойтись. Различной документации и справочной литературы достаточно и на русском языке, которую можно найти в интернете. Но в любом случае, если Вы не знаете английского языка, какое-то базовое понимание к Вам придет, когда Вы начнете писать код.
Продолжение следует...