Основы создания сайтов для новичков: HTML, CSS, JavaScript, PHP...
http://belarusweb.net
Основы создания сайтов

Добро пожаловать на belarusweb.net!

Кому будет полезен наш сайт

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

Какие web-технологии представлены на сайте?

Любой сайт во Всемирной паутине в конечном счете структурирует свою информацию при помощи языка гипертекстовой разметки HTML. Вместе с тем язык довольно прост для изучения и может служить хорошим началом для освоения обширной области веб-программирования.

Внешний вид сайтов оформляется при помощи языка CSS, который позволяет сделать дизайн сайта действительно уникальным и неповторимым, ограничиваясь лишь воображением и навыками дизайнера. Убедиться в этом можно, посетив известный проект CSS Zen Garden, на котором представлено более 200 вариантов совершенно разного дизайна на основе всего лишь одного html-документа.

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

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


Последовательность обучения веб-программированию

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

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

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

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

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

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

В процессе непосредственного изучения основ перечисленных IT-технологий, вы также сможете познакомиться с целым набором сопутствующих программных продуктов: различными браузерами, сборкой локального сервера XAMPP, текстовым редактором Notepad++, веб-приложением phpMyAdmin для работы с MySQL, приложением для обмена файлами с сервером FileZilla, приложение для контроля версий разрабатываемого приложения Tortoise HG, графическим редактором paint.net, приложением для архивации данных 7-zip и некоторыми другими. Кроме того, нами дополнительно будут рассмотрены вопросы связанные с регистрацией доменного имени и размещением готового сайта на реальном хостинге.

Все перечисленное выше наверняка поможет вам изменить свое отношение к программированию и пройти путь от абсолютного новичка до профессионала. Однако вам нужно уяснить одну простую вещь: при наличии времени изучить основы всех предлагаемых IT-технологий можно и за год-полтора, а вот для того, чтобы вы могли себе смело сказать, что вы программист, понадобится минимум 2-3 года упорного труда и самостоятельной работы. Я не говорю уже о том, чтобы стать реальным профессионалом в какой-то определенной области. Поэтому не верьте шаманам и IT-сектам, которые обещают сделать из вас профи за считанные недели, а запасайтесь терпением и трудолюбием и тогда у вас наверняка все получится.

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

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

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

Notepad++

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

Браузеры

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

XAMPP

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

Другое

Ссылки на полезные программы и рекомендуемые ресурсы также можно посмотреть в нашем разделе 'Ссылки' (см. боковое меню).

Комментарии (4)

Петр Романовский
Здесь приветствуются ваши отзывы о сайте и полезные предложения.
Швед
Сэнкью, вери мач)
№141 от 2018-05-24 06:30:25
Нравится ()
Ответить
Kuropatova Elena
Отличный ресурс, спасибо! Скорее заканчивайте с учебниками (извините, что повторяюсь).
№50 от 2018-01-23 20:30:50
Нравится ()
Ответить
Петр Романовский
Kuropatova Elena
Kuropatova Elena
Отличный ресурс, спасибо! Скорее заканчивайте с учебниками (извините, что повторяюсь).
2018-01-23 20:30:50
Kuropatova Elena, спасибо!
№52 от 2017-10-27 05:58:09
Нравится ()
Ответить
AlexandrGaukov
Детально структурированный и доступный (даже для новичков, к которым я и отношусь) ресурс. Спасибо!
№5 от 2017-10-16 08:23:28
Нравится ()
Ответить
Показаны все комментарии
Чтобы оставить свой комментарий, авторизуйтесь, пожалуйста!