html.okpython.net
HTML и CSS для начинающих

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

Пару слов о сайте

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

Основные разделы сайта

HTML

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

CSS

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

Javascript

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

PHP

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

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

В независимости от того, какой вариант обучения основам программирования вы решите выбрать, изучать материал желательно в той последовательности, в которой он перечислен ниже. Даже если вы не собираетесь в будущем заниматься конкретно разработкой сайтов и веб-программированием, а просто хотите научиться программировать с нуля, изучать языки нужно именно в указанной последовательности. Это связано не только с тем, что данные веб-технологии связаны между собой и сами по себе подразумевают такой подход, но также и с тем, что они перечислены в порядке возрастания сложности освоения, что особенно полезно для абсолютных новичков в программировании. Тем более, что после изучения хотя бы основ имеющихся на сайте 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++. Скачать его можно с официального сайта здесь.

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

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

Помогите проекту, подпишитесь!

Подписка на учебные материалы сайта https://html.okpython.net оформляется сроком на один год и стоит около 3 у.е. После подписки вам станут доступны следующие возможности.

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


На страницу подписки