HTML и CSS для начинающих!

• Пару слов о сайте
• Основные разделы сайта
• Последовательность обучения
• Рекомендуемое ПО

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

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

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

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

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

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

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

Notepad++

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

Браузеры

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

XAMPP

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