Обучение программированию на HTML, CSS, JavaScript, PHP
http://belarusweb.net
Основы создания сайтов

Обучение HTML, CSS, JavaScript, PHP

Индивидуальный чат с автором

По ходу самообучения у вас наверняка будет возникать масса различных вопросов и сложностей в освоении нового материала. Поэтому, чтобы иметь возможность задавать вопросы по различным непонятным моментам, для всех авторизованных пользователей сайта доступен индивидуальный 'Чат с автором'. По возможности я стараюсь отвечать всем, в особенности абсолютным новичкам, которые вообще не имели опыта программирования.

Последовательность обучения

В независимости от того, какой вариант обучения основам программирования вы решите выбрать, изучать материал следует в той последовательности, в которой он перечислен ниже. Даже если вы не собираетесь в будущем заниматься конкретно разработкой сайтов и веб-программированием, а просто хотите научиться программировать с нуля, изучать языки нужно именно в указанной последовательности. Это связано не только с тем, что данные веб-технологии связаны между собой и сами по себе подразумевают такой подход, но также и с тем, что они перечислены в порядке возрастания сложности освоения, что особенно полезно для абсолютных новичков в программировании. Тем более, что после изучения хотя бы основ имеющихся на сайте IT-технологий, вы сможете самостоятельно и без особых проблем осваивать любые другие языки программирования.

1. Начинать следует с языка гипертекстовой разметки HTML, который позволяет логически размечать страницы веб-сайтов. И хотя HTML скорее является формальным, чем полноценным, высокоуровневым языком программирования, он позволяет начинающим программистам приучиться к аккуратному набору кода (неформатированный код очень тяжело читать и редактировать), внимательности при вводе синтаксических конструкций (пропуск даже единичных служебных символов может привести к неработоспособности всего кода), а также знакомит новичков с понятием комментариев и общими правилами их составления.

2. После освоения правил логической разметки веб-страниц можно переходить к изучению правил оформления внешнего вида страниц. За это отвечает еще один формальный высокоуровневый язык программирования CSS, который при помощи специальных таблиц стилей позволяет оформить дизайн сайта по усмотрению программиста. Синтаксис данного языка хотя и отличается в корне от синтаксиса языка HTML, но также очень прост как в изучении, так и в последующем применении на практике. Вместе данные языки дают возможность создавать небольшие оформленные статические сайты (например, сайты-визитки). Учебный пример сайта только лишь на HTML и CSS можно посмотреть здесь.

3. Далее, чтобы иметь возможность создавать полнофункциональные сайты и веб-приложения, необходимо изучить уже не формальный, а полноценный объектно-ориентрированный язык программирования JavaScript (занимает 2-5 место в мировых рейтингах по востребованности). Главными преимуществами изучения данного языка для новичка являются с одной стороны простота его синтаксиса, а с другой - наличие практически всех общепринятых языковых конструкций, которые присутствуют в других языках программирования. Примером сайта использующего JavaScript может служить наш сервис бесплатных онлайн-калькуляторов, который можно посмотреть здесь.

4. Для того, чтобы иметь возможность делать сайты не только функциональными, но также интерактивными и динамическими, понадобится изучить еще один популярный язык программирования PHP (занимает 4-6 место в мировых рейтингах по востребованности). Для новичков же изучение данного языка будет чрезвычайно полезным еще и потому, что язык имеет хоть и похожий, но все таки отличный от JavaScript и более сложный синтаксис. Значительная часть сайта belarusweb.net написана именно на PHP. И вообще, сделать на сайте, например, комментарии или форму регистрации без помощи PHP (или другого серверного языка программирования) вряд ли получится.

5. В связке с PHP обычно используется система управления базами данных MySQL (если проще, то базы данных). Это является еще одним жирным плюсом при изучении программирования "с нуля", т.к. базы данных используются не только в веб-программировании, но и везде, где требуется систематически и упорядочненно хранить какие-либо данные и управлять ими (например, данные клиентов в банке, каталоги интернет-магазина или просто бухгалтерские отчеты). Кроме того, большинство систем управления базами данных используют в своей работе язык запросов SQL, что позволяет после изучения одной из них с легкостью изучить и другую. Опять же, реальным рабочим проектом сайта, для создания которого использовались все пять веб-технологий, является данный сайт. Именно в базах данных MySQL на нем хранятся данные пользователей, комментарии, лайки и т.д.

Несколько советов по учебному процессу

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

Рекомендуемое программное обеспечение

Для создания и редактирования программного кода можно использовать любой текстовый редактор, однако для синхронизации с приводимыми в учебниках примерами желательно установить бесплатный текстовый редактор Notepad++. Скачать его можно с официального сайта здесь.

Кроме того, тестировать примеры и готовые веб-страницы мы будем не в одном, а сразу в нескольких основных браузерах, желательно последних версий:
  Google Chrome:   (скачать),
  Mozilla Firefox:   (скачать),
  Яндекс.Браузер:   (скачать),
  Opera:   (скачать).

Не обойтись нам и без своего локального сервера, который позволит тестировать готовые веб-страницы непосредственно у себя на компьютере без необходимости использования услуг провайдеров, по крайней мере, до тех пор, пока мы не будем готовы размещать свой сайт в интернете. Однако установка сервера – это довольно сложная задача для новичков, поэтому целесообразнее воспользоваться одним из множества готовых решений, например XAMPP. После установки приложения вы автоматически становитесь счастливым обладателем своего локального сервера, на котором сможете располагать и тестировать создаваемые вами сайты. Для этого достаточно поместить папку с сайтом непосредственно на XAMPP-сервер в папку htdocs. Скачать установочный файл XAMPP можно с официального сайта здесь.