Reg.ru: домены и хостинг

Крупнейший регистратор и хостинг-провайдер в России.

Более 2 миллионов доменных имен на обслуживании.

Продвижение, почта для домена, решения для бизнеса.

Более 700 тыс. клиентов по всему миру уже сделали свой выбор.

*Наведите курсор мыши для приостановки прокрутки.

Назад Вперед

HTML, CSS, PHP, JavaScript, SQL – что и зачем?

В этом материале я хочу обзорно рассмотреть назначение основных языков программирования и разметки, применяющихся в веб-разработке.

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

Это вопросы следующего плана:

В каком порядке надо изучать языки создания сайтов?
- Что сложнее: JavaScript или PHP?
- Зачем нужен язык SQL?
- Чем отличаются версии CSS друг от друга, и какую из них следует изучать?
- Как работаю динамические сайты?
- Для чего нужен PHP?
и т.д…

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

В этом материале почти не будет примеров кода, т.к. перед нами стоит другая задача – получить общее представление о назначении каждого из языков и его месте в веб-разработке.

Итак, поехали. Начнем мы с языка HTML.

Расширения файлов: .htm , .html

HTML - это язык разметки гипертекста (от англ. HyperText Markup Language ).

Данный язык применяется для создания веб-страниц. Он интерпретируется (обрабатывается) браузером и отображается в виде документа в удобной для человека форме.

HTML – это неотъемлемая составляющая и основа практически любой веб-страницы. Язык HTML в первую очередь выступает как средство логической разметки страницы .

Именно HTML позволяет нам наделять содержимое страницы определенным смыслом, а реализуется это с помощью так называемых тэгов.

Тэги – это специальные маркеры, которые определенным образом интерпретируются браузером. Суть тэгов в том, что содержимое страницы, заключенное в разные тэги, по-разному обрабатывается браузером.

Скажем, мы можем заключить контент (содержимое) страницы в тэг параграфа, и данное содержимое будет считаться браузером параграфом.

Мы можем заключить содержимое в тэг списка, и тогда информация внутри него будет интерпретироваться как список.

Мы можем поместить контент в тэг таблицы, и содержимое в итоговом документе будет отображаться в виде таблицы и т.д.

Иными словами, каждый из HTML-тэгов, предназначенных для разметки текстовой информации, придает этой информации некоторый смысл .

Язык HTML имеет достаточно длительную историю развития, и за это время претерпел значительные изменения. Большая часть изменений связана с добавлением в язык новых тэгов и «выводом из обращения» устаревших. На момент написания этой статьи уже была начата разработка версии HTML 5.1.

Для разных версий HTML предусмотрено разное объявление типа документа . Рассмотрим с вами пару примеров объявления типа HTML 4.01 (на данный момент его можно считать уже устаревшим).

1. Строгий (Strict) : не содержит элементов, помеченных как «устаревшие» или «не одобряемые» (deprecated):

2. Переходный (Transitional): содержит устаревшие теги в целях совместимости и упрощения перехода со старых версий HTML:

3. С фреймами (Frameset): аналогичен переходному, но содержит также теги для создания наборов фреймов:

Объявления типов документов, приведенные выше, со временем будут все больше уходить в прошлое, уступая место версии HTML 5.

В HTML 5 используется только один вариант DOCTYPE (тип документа):

Также следует упомянуть о том, что существует еще и язык XHTML . Это расширяемый язык разметки гипертекста (от англ. Extensible Hypertext Markup Language ). На данный момент его развитие остановлено и рекомендуется использовать HTML. Новые версии XHTML не выпускаются.

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

Однако такой подход считается неверным и устаревшим, т.к. для задания внешнего вида существует отдельный язык.

На этом с HTML мы завершаем и переходим к языку CSS.

Расширение файлов: .css

CSS – это язык описания внешнего вида документа, написанного с использованием языка разметки. Название произошло от англ. Cascading Style Sheets - каскадные таблицы стилей.

Проще говоря, язык CSS предназначен для того, чтобы придавать необходимый внешний вид HTML-документам.

Придание внешнего вида документам HTML – это хоть и самый популярный, однако лишь частный случай применения языка CSS, т.к. с его помощью можно придавать вид и документам других типов: XHTML, SVG и XUL . Про них мы отдельно говорить не будем, т.к. это выходит за рамки рассматриваемого вопроса.

Итак, целью создания CSS было отделение описания логической структуры веб-страницы от ее внешнего вида . Как вы уже знаете, для описания структуры используется HTML, для описания же того, как эта логическая структура будет выглядеть, отвечает как раз CSS.

Раздельное описание логической структуры и представления документа позволяет более гибко управлять внешним видом документа и минимизировать объем повторяющегося кода , который бы неизбежно возникал при использовании HTML для описания внешнего вида документа.

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

Разумеется, для того, чтобы использовать CSS для придания внешнего вида HTML-документу, нужно этот документ как-то связать со стилями, т.е. «сообщить» HTML-документу, что он будет оформлен с помощью CSS.

Для этого существуют различные способы подключения CSS к документу, которые дают браузеру знать, что к странице в целом, либо к каким-то отдельным ее элементам должно быть применено стилевое оформление.

Таблицы стилей могут располагаться как непосредственно внутри того, документа, к которым они будут применяться, так и находиться в отдельном файле, имеющем расширение .css .

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

Стили CSS могут быть подключены к странице (либо внедрены в нее) четырьмя следующими способами:

1. Если таблица стилей находится в отдельном файле, то она подключается к документу с помощью специального тэга link , который должен располагаться в этом документе внутри тэга head :

В атрибуте href при этом указывается путь до подключаемого файла стилей.

2. Второй способ подключения применяется также в том случае, если стили находятся в отдельном файле. При этом используется директива @import , которая должна находиться в этом документе внутри тэгов style head ):

@import url(style.css);

Здесь, как вы можете видеть, путь до подключаемого файла указывается в круглых скобках после слова url .

3. Третий способ используется в случае, когда стили CSS расположены внутри того документа, к которому они должны применяться. В этом случае стили должны находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head ):

body { color: red; }

В примере выше внутри тэгов style расположен стиль, задающий красный цвет текста для элемента body веб-страницы.

4. Четвертый способ также применяется в случаях, когда таблица стилей описана в самом документе. При этом стилевое оформление задается для какого-то конкретного элемента веб-страницы (тэга) посредством использования его атрибута style .

При этом все CSS-правила, заданные таким образом, будут применяться только к текущему тэгу (элементу веб-страницы).

Используем встроенные таблицы стилей.

В примере выше мы задаем размер шрифта и его цвет для одного конкретного абзаца текста в рамках документа.

Подводя итог по способам подключения стилей, можно сказать, что в первых двух случаях к документу применялись внешние таблицы стилей , в то время как в 3 и 4 способах мы имеем дело со встроенными (или внутренним) стилями.

Сами стилевые правила задаются в виде пар «свойство: значение;» . При этом применяются эти правила к так называемым селекторам. Скажем, в 3 примере мы имеем дело с селектором элемента (body ). В качестве свойства выступает color , а в качестве значения – red .

Всего существует 10 видов селекторов, рассмотрение которых, по понятным причинам, выходит за рамки данного обзора.

Важно, чтобы вы понимали общий принцип.

Селектор определяет один или группу элементов, к которым будут применяться стилевые правила (в нашем случае это все содержимое тэга body )

Свойство можно определить как вид преобразования, которое будет применено к элементу (в нашем случае это color , т.е. цвет текста).

Значение же определяет непосредственно значение определенного вида преобразования (в нашем примере это red , т.е. красный цвет).

В процессе своего развития язык CSS уже прошел достаточно длинный путь, и в настоящее время существует несколько его уровней: CSS1, CSS2, CSS2.1, CSS3. C конца 2011 года разрабатывается уже CSS4.

Смысл разных уровней в том, что происходит исправление существующих ошибок, добавление новых свойств, расширение механизма селекторов и т.д.

Иными словами, каждый следующий уровень является не чем-то обособленным, а логическим развитием и продолжением предыдущего уровня, позволяя более тонко и гибко управлять внешним видом web-страниц.

На этом обзор CSS мы заканчиваем и переходим к следующему звену – языку PHP.

Расширение файлов: .php

Когда вы уже хоть немного разобрались с HTML и CSS, то сразу возникает вопрос: «А что же дальше?» . Вы же хотели создавать классные сайты, а с помощью HTML и CSS сделать этого ну никак не получается…

Здесь вам нужен уже язык совершенно другого типа и назначения.

PHP на протяжении многих лет стабильно находится с списке наиболее популярных языков программирования и веб-разработки.

Что же такое PHP?

PHP расшифровывается как Hypertext PreProcessor (что-то вроде "преобработчик HTML").

Что это означает? Начнем немного издалека: есть два типа языков. Один тип называется "клиентским" , а другой - "серверным" .

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

Все действия и команды, которые мы задаем, скажем, на языке JavaScript, выполняются браузером (для упрощения мы не рассматриваем серверный JavaScript).

Это означает, что один и тот же код, написанный нами, обрабатывается в одном случае браузером Internet Explorer, в другом - Firefox, в третьем - Opera, в четвертом - Google Chrome, т.е. тем обозревателем, который использует каждый конкретный человек для просмотра нашей страницы.

Браузер, таким образом, имеет альтернативное название - клиент .

В случае с серверными языками (к которым и относится PHP) мы наблюдаем другую картину.

Наш сайт всегда расположен на каком-либо сервере, т.е. мощном компьютере, специально предназначенном для размещения на нем сайтов многих людей.

Все команды и скрипты, написанные на языке PHP, выполняются именно на сервере , и никак иначе. После того, как PHP-скрипт выполнится на сервере, сервер "отдает" результат своей работы браузеру, который преобразует этот результат в удобный для нас вид.

Здесь важно понимать следующий момент: по исходному коду веб-страницы, который можно посмотреть в любом браузере через опцию вроде "Исходный код страницы" нельзя определить, использовался ли язык PHP для создания данной страницы, или нет.

Невозможно это сделать как раз потому, что PHP-скрипты обрабатываются на сервере, а в браузер передается уже готовый, обработанный вариант . По сути, только HTML-код.

Разница по сравнению с обычными статичными HTML-страницами заключается в одном дополнительном этапе обработки кода.

В случае с HTML-страницей есть только один этап: браузер обрабатывает HTML-код, т.е. разметку страницы в соответствии с определенными правилами, в результате чего мы и видим веб-страницу в нормальном виде.

В случае с PHP-страницей есть два этапа: сначала так называемый PHP-интерпретатор (обработчик) производит выполнение PHP-кода (в результате этого получается простой HTML-код), а после этого уже браузер обрабатывает результат этой обработки, т.е., по сути, выполняется тот самый этап, который является единственным в случае с HTML-страницей.

Вообще PHP прекрасно работает в паре с HTML . Более того, в HTML-код можно делать вставки PHP-кода, а с помощью PHP выводить HTML-разметку.

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

Для чего использовать PHP?

HTML на 100% статичен. Встраивая же в наши страницы PHP-код, мы можем добиться того, чтобы содержимое одной и той же страницы было различно в зависимости от определенных условий (динамические страницы).

За долгие годы своего существования язык PHP зарекомендовал себя как великолепное решение для создания динамических веб-сайтов.

Что нужно, чтобы начать работать с PHP?

Для полноценной работы с PHP на Вашем компьютере нужны следующие вещи:

1. Веб-сервер Apache (он используется в большинстве случаев);
2. Система Управления Базами Данных (СУБД) MySQL (в базе данных хранится наполнение сайта);
3. Установленный интерпретатор PHP;
4. Текстовый редактор, в котором Вы будете писать код;
5. Браузер.

Теперь чуть подробнее о первых трех пунктах.

1. Веб-сервер предназначен для имитации на Вашем компьютере того самого сервера, на котором потом будет размещаться Ваш сайт уже на хостинге в Интернет. Это нужно для того, чтобы у себя на компьютере Вы могли писать любые PHP-скрипты и смотреть, как они работают, вносить в них изменения и правки. Одним словом, это необходимо для так называемой отладки.

2. СУБД MySQL нужна для хранения информации, которая будет на Вашем сайте. В случае с HTML-страницами все содержимое сайта находится непосредственно в них. Каждая страница содержит определенный объем информации (контента).

При использовании PHP для целей хранения полезного информационного наполнения сайта используется, как правило, база данных. В подавляющем большинстве случаев это MySQL.

3. Интерпретатор PHP - это своеобразная программа, которая осуществляет обработку PHP-кода на веб-сервере. Без него мы никак не сможем выполнить наши PHP-скрипты и увидеть результат их работы.

Для того чтобы сообщить веб-серверу о том, что должна быть произведена обработка PHP-кода, необходимо использовать следующий синтаксис при добавлении PHP в HTML-документ:

В этом случае веб-сервер, дойдя до открывающего тэга PHP ( ) интерпретатор PHP прекращает свою работу.

Вернемся теперь к роли PHP в создании сайтов.

Представим для начала, что у нас есть простой статичный сайт, написанный на языке HTML. Он состоит из ряда страниц и представляет собой просто набор неизменных файлов.

На таком сайте нет возможности создать форму обратной связи, комментарии, регистрацию пользователей, поиск и т.д.

Кроме того, у такого сайта не может быть панели управления, из которой мы могли бы добавлять новые страницы, либо редактировать и удалять уже существующие.

При использовании только языка HTML мы сильно ограничены в создании действительно удобных и функциональных сайтов , поскольку мы не имеем никаких «рычагов управления» каждой конкретной страницей.

Все, что мы можем – это вручную открыть отдельную HTML-страницу в редакторе кода и как-то ее модифицировать.

Использование же языка PHP позволяет нам создавать действительно мощные сайты благодаря тому, что мы можем продумывать и реализовывать «поведение» нашего сайта .

Иными словами, мы можем сделать так, чтобы наш сайт вел себя по-разному в разных ситуациях , действуя по прописанным нами алгоритмам в зависимости от выполнения или невыполнения определенных условий.

Возможность задания нужной нам логики «поведения» сайта является одной из важнейших и наиболее ценных в языке PHP.

Наряду с уже озвученными преимуществами следует упомянуть, что PHP предоставляет нам множество инструментов для работы с данными различных типов.

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

Помимо этого, язык PHP позволяет нам работать с файлами и папками . Мы можем его средствами создавать, редактировать и удалять файлы и папки. Мы можем перемещать и переименовывать их и выполнять множество других операций.

Конечно же, нельзя обойти стороной и такой важный момент, как возможность использования PHP для организации более удобного взаимодействия пользователя с сайтом.

Это такие вещи, как:

Форма обратной связи;
- возможность комментирования;
- регистрация пользователей;
- поиск по сайту;
- запоминание введенной пользователем информации (по принципу «покупательской тележки»); и т.д.

И, разумеется, PHP активно используется для создания самых разных панелей администратора, откуда вы можете просто и удобно управлять своим сайтом.

Добавление новых материалов, редактирование категорий, модерирование комментариев, изменение пунктов меню сайта, управление настройками – все это и многое-многое другое можно реализовать средствами PHP.

Резюмируя обзор по языку PHP, можно сказать, что следующим шагом после освоения HTML и CSS должно быть изучение языка PHP, т.к. именно он позволит вам перейти на принципиально иной уровень в создании сайтов.

С PHP мы заканчиваем и переходим к еще одному языку – JavaScript.

Расширение файлов: .js

JavaScript – это язык программирования, нашедший наиболее широкое применение в браузерах для придания интерактивности веб-страницам.

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

Основной задачей JavaScript в рассматриваемом нами контексте является манипулирование элементами DOM-модели web-страницы.

Давайте разберемся с тем, что же такое DOM .

DOM – это объектная модель документа (от англ. Document Object Model ).

Согласно DOM, документ (например, веб-страница) может быть представлен в виде дерева объектов, обладающих рядом свойств, которые позволяют производить с ним различные манипуляции:

Получение узлов;
- изменение узлов;
- изменение связей между узлами;
- удаление узлов.

Именно эти манипуляции и позволяет нам осуществлять над элементами страницы язык JavaScript.

Для добавления JavaScript-кода на страницу можно использовать тэг script . Его рекомендуется помещать внутри тэга head , хотя это и не обязательно.

Контейнеров script в одном документе может быть сколько угодно. При этом атрибут «type="text/javascript"» указывать необязательно, т.к. значение javascript является значением по умолчанию.

Ниже приведен пример скрипта, выводящего так называемое модальное окно с классической надписью «Hello, World!» внутри браузера:

alert("Hello, World!");

Располагать JavaScript-код можно и внутри тэга. Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Рассмотрим такой пример:

Удалить

При этом при отрицательном ответе (т.е. «нет», если мы не уверены) происходит блокировка перехода по ссылке.

Обратите внимание, что такая практика использования JavaScript не считается хорошей.

Правильным вариантом применения JavaScript был бы такой подход. Сперва мы снабжаем идентификатором (id="alertLink" ) ссылку:

Удалить После этого пишем следующий код в отдельном JavaScript-файле (как его подключить к документу будет показано чуть ниже): window.onload = function() { var linkWithAlert = document.getElementById("alertLink"); linkWithAlert.onclick = function() { return confirm("Вы уверены?"); }; };

В этом примере мы создаем функцию, срабатывающую при загрузке веб-страницы. Эта функция находит элемент с идентификатором alertLink и отслеживает событие клика по нему (т.е. по ссылке «Удалить»).

По событию клика мы выводим модальное окно с уже знакомым нам сообщением.

Возможно, данный пример покажется вам немного сложным, если вы ничего не знаете о JavaScript, но на данном этапе это не так важно.

Важно, чтобы вы поняли сам принцип, подход к работе при использовании JavaScript.

И, наконец, как я и обещал чуть выше, давайте рассмотрим, как можно подключить JavaScript из внешнего файла.

Здесь ситуация очень похожа на ту, что была в случае с CSS, только вместо CSS-кода мы пишем в файле (с расширением.js) JavaScript-код, после чего подключаем его в нужный нам файл в тэге head при помощи конструкции:

После такой манипуляции нам будут доступны все функции, которые были написаны нами в JavaScript-файле.

Итак, можно сказать, что JavaScript – это язык, который позволяет вам активно управлять структурой вашей страницы, манипулировать ее элементами .

На практике это находит свое применение при создании различных анимационных эффектов, эффектов перемещения, растворения, увеличения и уменьшения объектов.

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

Часто JavaScript используется и для первичной проверки данных , которые пользователь вводит в формы.

Говоря о JavaScript, нельзя не упомянуть о специальных JavaScript-библиотеках (jQuery, Prototype, MooTools и др.)

Смысл JavaScript-библиотек заключается в том, чтобы предоставить кросс-браузерный интерфейс к методам DOM .

Это означает, что вы можете использовать определенные функции, уже написанные в рамках той или иной библиотеки и получать необходимый вам результат, одинаково хорошо работающий во всех браузерах.

К тому же библиотеки избавляют веб-разработчиков от необходимости изучать в деталях сам JavaScript, предоставляя ряд удобных в использовании инструментов, позволяющих с легкостью управлять объектной моделью документа.

Резюмируя, можно сказать, что JavaScript может стать «изюминкой» вашего сайта, причем как в плане его украшения, так и в плане дополнительного функционала, который можно обеспечить с помощью данного языка.

С JavaScript у нас все, и мы переходим к последнему языку – SQL

Расширения файлов: .sql

SQL – это информационно-логический язык, предназначенный для описания, изменения и извлечения данных, хранимых в реляционных базах данных.

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

Для чего вообще нужна база данных?

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

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

Базы данных имеют ряд преимуществ по сравнению, например, с хранением текстовой информации в файлах:

1. Высокая скорость получения информации;

2. Они позволяют получать произвольный доступ к данным. (т.е. легко обратиться к какой-то одной, конкретной записи в базе);

3. Из базы данных можно извлекать данные, соответствующие определенным критериям, которые нас интересуют;

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

Если бы мы имели дело с файлами, то нам пришлось бы намного сложнее.

Поэтому, параллельный доступ к данным - одно из важнейших преимуществ баз данных.

Отличие базы данных от СУБД

Важно различать термины "база данных" и "система управления базами данных" (СУБД) .

База данных - это информация, которую мы храним и структура этой информации, в то время как СУБД - это программа, которая предоставляет внешним приложениям доступ к базам данных.

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

СУБД же выбирается нами из определенного ограниченного списка (Oracle, MySQL, PostgreSQL и т.д.)

Чаще всего можно встретить связку PHP + MySQL . В большинстве случаев вы также будете работать именно с ней.

Рассмотрим теперь понятие реляционной базы данных .

На сегодняшний день так называемые реляционные базы данных являются самыми популярными.

Реляционные базы данных - это базы данных, состоящие из таблиц.

Само же слово "реляционные" происходит от англ. relation - отношение.

Под "отношением" понимается связь между различными таблицами, входящими в базу данных.

Что характерно, таблицы в базе данных - это действительно обычные таблицы, которые по своей сути идентичны любым таблицам, с которыми вы сталкивались в жизни - начиная от таблицы умножения, и заканчивая таблицами в Microsoft Excel .

Таблица имеет некоторое ограниченное количество столбцов (как правило, небольшое) и сколь угодно много строк.

Каким образом можно вставлять новые данные в базу, изменять их, удалять и производить иные манипуляции?

Для этого и существует специальный язык SQL (от англ. Structured query language - язык структурированных запросов).

Т.е. SQL - это универсальный компьютерный язык, разработанный именно для управления реляционными базами данных.

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

Как правило, SQL-запросы передаются в СУБД посредством внешней программы. При этом СУБД выполняет указанный запрос и возвращает в ответ некоторый результат.

Каждая команда SQL - это либо запрос данных из базы, либо обращение к базе данных, которое приводит к изменению данных в базе. В соответствии с тем, какие изменения происходят в базе данных, различают следующие типы запросов:

Запросы на создание или изменение в базе данных новых или существующих объектов (при этом в запросе описывается тип и структура создаваемого или изменяемого объекта);
- запросы на получение данных;
- запросы на добавление новых данных (записей)
- запросы на удаление данных;
- обращения к СУБД.

Таким образом, язык SQL является тем связующим звеном, которое обеспечивает взаимодействие веб-приложения с базой данных и хранящейся в ней информацией.

Язык SQL сложно назвать простым, и полноценное его использование потребует от вас достаточно больших усилий по его изучению.

Именно поэтому во многих инструментах веб-разработки (к примеру, во фреймворке CodeIgniter) взаимодействие сайта с базой данных реализовано с помощью своеобразной «надстройки», которая позволяет выполнять с ней все необходимые действия, не изучая при этом сам язык SQL.

Однако если вы не используете инструментов, подобных CodeIgniter, то для создания полноценного веб-приложения, управляемого базой данных, вам, разумеется, нужно будет освоить SQL.

Ну что ж, давайте подведем небольшой итог этого обзора.

Фундаментом веб-разработки был и остается язык HTML . Без него все остальное практически лишено смысла, ведь именно HTML-разметка преобразуется браузером в ту итоговую картину, что мы видим на экране монитора.

CSS является инструментом задания внешнего вида и позиционирования различных элементов веб-страницы, что позволяет нам гибко управлять обликом нашего веб-приложения.

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

JavaScript выступает в качестве важного, но не всегда обязательного дополнения. Он способен существенно повысить удобство использования вашего сайта и его интерактивность, добавить в него определенную «изюминку».

Наконец, SQL позволяет нам организовать взаимодействие сайта с базой данных, что и позволяет нам, в связке с языком PHP создавать действительно мощные, функциональные сайты.

С уважением, Дмитрий Науменко.

P.S. Кое-что понятно, но куда двигаться дальше? Присмотритесь к премиум-урокам по различным аспектам сайтостроения, а также к бесплатному курсу по созданию своей CMS-системы на PHP с нуля. Все это поможет вам быстрее и проще освоить веб-технологии: начиная с HTML и CSS и заканчивая JavaScript, PHP и SQL.

Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!


Начну, пожалуй, с начала..

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

Теперь о командах - их называют дескрипторами, но чаще - тегами.

Вернемся к нашей первой страничке.. итак мы написали:



Моя первая страничка


Привет мир!!!


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

Так что же мы написали? и как это читает браузер?

Мысли браузера:

- начало документа.. опять работы привалило..
- смотрим словарик английского переводим "голова" …в голове моей опилки не беда!! ... здесь указывается основная служебная информация о документе.. ну и что они там от меня хотят?
- "название" значит.. это в шапке окна нужно написать его название:
Моя первая страничка - опять чайник тренируется..
- все название закончилось.. можно идти дальше..
- ага и в голове кроме названия больше никаких вздорных мыслей не держим..
- "тело" документа всё что написано ниже выставляем на всеобщее обозрение
Привет мир!!! - как мило! Достали уже!!!

- переносим текст на следующую строчку.. я даже догадываюсь что в ней будет...
Меня зовут (здесь Ваше имя), это моя первая страничка! - ну да так и есть.. ничего пооригинальнее придумать не могут..
- что всё что ли? Больше ничего не отображать?
- ну вот и конец!! Не будить, не кантовать, при пожаре выносить первым!!

Вот так примерно и происходит чтение нашей странички.. Как видите браузер довольно своенравный тип, поэтому команды ему нужно подавать чёткие и ясные, иначе он разругается.. причем в слух.. а по сему запомним следующие вещи:

1) Необходимо раз и навсегда запомнить что если есть открывающий тег то обязательно должен быть и закрывающий

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

2) Все документы должны иметь вот такой шаблон кода:

- начало документа
- начало головы
- закрытие головы
- начало тела
- закрытие тела
- конец документа

Данные теги являются обязательными! Писать их необходимо всегда для каждой новой странички, и только в таком порядке! Не пытайтесь перевернуть всё с ног на голову..

3) О порядке:

Открывающий и закрывающий тег по типу представляет собой своего рода ёмкость, ящик в который могут складываться другие теги - ящички поменьше.. следовательно, согласно логики документ должен выглядеть так:




содержание


Если писать, например, так:




содержание



То получится белиберда, которая в голове не укладывается, "большой" уже закрыт, а из него "торчит" "маленький", который заперт в "среднем", а "содержание" рассыпалось везде.. Такое даже человеку трудно представить, что уж там про браузер говорить.. Чётко структурируйте код Вашей странички иначе ничего работать не будет..

Ну вот мы научились писать простой текст, начало положено! в следующей главе я расскажу о том, что с ним можно сделать..

    При написании сайта создайте папку в любом удобном месте на Вашем жёстком диске, называйте как угодно, лишь бы понятно было.. в эту папку сохраняете Ваши странички, присваивая им осмысленные имена.. варианты типа ааа.html, 123.html приведут к беспорядку и путанице… На данном этапе этот совет не покажется дельным, но в дальнейшем это значительно облегчит Ваш труд. Представьте к примеру хотя бы 20-30 таких файлов названия которых нужно держать в голове, чтобы связать их перекрёстными ссылками. Порядок, прежде всего!

    При написании кода советую придерживаться "хорошей манере письма", то есть писать теги "лесенкой" по мере вложенности одного тега в другой. Со временем Вы поймёте что читать код написанный вот так:



    Моя первая страничка


    Привет мир!!!

    Меня зовут Карлсон, это моя первая страничка!

    Значительно легче, чем так:



    Моя первая страничка


    Привет мир!!!

    Меня зовут Карлсон, это моя первая страничка!

    И уж тем более чем вот так:

    Моя первая страничкаПривет мир!!!
    Меня зовут Карлсон, это моя первая страничка!

    Хоть это и дело привычки.. всё же лучше привыкнуть писать "разборчиво".

Приветствую вас на своем блоге о веб-технологиях. Сегодня я хотел бы написать статью для тех, кто является новичками в сфере сайтостроения. В частности, о языке html . Что это такое и для чего оно нужно? Я попытаюсь объяснить вам максимально подробно.
Содержание статьи

Официальное определение

Я считаю, что лучше Википедии сформулировать определение не смогу, поэтому:
Цитата

HTML (от англ. HyperText Markup Language - «язык гипертекстовой разметки») - стандартный язык разметки документов во Всемирной паутине. Большинство веб-страниц содержат описание разметки на языке HTML (или XHTML).

А теперь я попытаюсь вам это издалека объяснить. Все в нашей жизни из чего-то состоит. Дом из строительных материалов, воздух – из таких элементов, как азот, кислород, углекислый газ и другие. А у нас, значится, веб-страницы (например, сейчас вы находитесь на такой странице). И они тоже из чего-то должны состоять, не так ли? Так вот, это что-то и является языком html. Правда, не он один формирует страницу, но об этом уже далее по ходу статьи.

Немного теории

Итак, html – это специальный язык, с помощью которого создаются веб-странички, из которых собственно состоит весь интернет. Он является строительным материалом для страниц. На английском аббревиатуре расшифровывается так: HyperText Markup Language .

Почему гипертекст? Все просто, он отличается от обычного текста тем, что по ходу чтения информации в интернете вы можете спокойно нажать на другие ссылки и перейти на другие страницы, а при обычном чтении книги или текстового документа вы так сделать не можете.

Ну и еще надо разобраться со словом разметка, чтобы стало еще понятней. Наверняка вы в своей жизни не раз играли в какую-нибудь спортивную игру, вроде волейбола или футбола. Тогда вы прекрасно должны знать, что площадка для игры имеет свою разметку.

Например, в футболе есть боковые и лицевые линии, штрафная и вратарская зоны, центральный круг, угловые флажки и т.д. Так вот, html отвечает за разметку веб-странички, за ее структуру. Это можно сравнить со скелетом человека или каркасом здания.

Html формат – что это такое и чем его открыть

Итак, документы, содержащие команды на языке html, имеют одноименный формат. Это статические странички, на которых можно разместить какую-то информацию. Если в них добавляют язык php, то расширение документа изменяется на php , но при этом в нем по-прежнему могут находиться html-теги.

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

Статический файл также можно легко открыть в любом веб-обозревателе, но если он содержит расширение php, то только на виртуальном или локальном сервере.

Из чего состоит html

Синтаксисом, как правило, называют правила написания кода на различных языках. Html полностью состоит из тегов и их атрибутов, а также непосредственного содержимого. Таким образом, изучение языка заключается в изучении роли основных тегов и атрибутов.

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

Как пишутся теги

Тег пишется так: его имя заключается в угловые скобки, а зависимости от ситуации ему дописываются атрибуты и содержимое. Примеры:

Содержимое тега

Теги бывают парными и одинарными. В данном случае я как раз привел вам пример как парного, так и одинарного. Суть в том, что одинарный не имеет закрывающей части (), а еще в нем не нужно писать содержимое.

Например, тег img отвечает за вставку картинки на веб-страницу. Согласитесь, в изображение не нужно вписывать дополнительно никакую информацию, все необходимое задается в атрибутах. В нашем случае атрибут src задает путь к изображению.

Ну а первый пример – это парный тег p . Он отвечает за вывод абзаца (paragraph ). Тут мы видим закрывающую часть, она показывает, что в этом месте абзац нужно закончить. Также есть содержимое, что логично. Не может же абзац быть пустым, без текста? Весь нужный текст записывается между открывающей и закрывающей частями.

Вот таким вот образом работают в html все теги. Конечно, все я описывать не буду, ведь их несколько десятков (самых основных). Например, за вывод крупного заголовка отвечает тег h1 , за создание таблицы – table , нумерованного списка – ol . ().

Все их описывать ни к чему, вы сможете самостоятельно их выучить, если возникнет желание получше разобраться.

Атрибуты тегов

Атрибуты, это дополнительные команды, которые применяются к тегам. Все они пишутся только в открывающей части тега и записываются по такому принципу:

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

В первой строчке кода мы с помощью тега a создали ссылку и для нее прописали такие атрибуты: href – путь, по которому нужно перейти, target – специальная команда, которая определяет, нужно ли открывать ссылку в новом окне, а значение _blank как раз это и делает. Как видите, атрибуты записываются через пробел, а их значения в двойных кавычках.

Второй пример: атрибутом charset определяем кодировку страницы как utf-8 .

Третий: записываем абзацу атрибут class = "two" , который привязывает к нему стилевой класс с указанным именем (имя может быть произвольным) и теперь в каскадных таблицах стилей (css) мы можем обратиться к этому элементу и оформить его.

Итог

Целью этой статьи было донести до вас, что собой представляет html, для какой цели он нужен и из каких элементов он состоит. На самом деле это одна из самых простых веб-технологий, с которой можно разобраться буквально за пару недель. Как изучить этот язык я написал в , советую вам почитать, если интересно. На этом я буду заканчивать, а вам рекомендую не бояться начинать изучение, если вы сомневаетесь.

А зачем это мне?

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

Нередко в статьях можно увидеть аббревиатуру HTML. Собственно, благодаря этому понятию интернет и стал таким, каким он известен современному пользователю. Именно HTML привел к бурному росту мировой сети и увеличению числа сайтов в ней.

Что такое HTML?

HTML - это язык, который используется для создания и разметки веб-страниц, размещаемых в сети. Она был основан на единственной идее. Она заключалась во внесении в обычный текст ссылок. Щелкнув по одной из них, пользователь мог переместиться в другое место документа.

Позднее добавилась возможность перейти по ссылке, которая ведет к другому текстовому документу, расположенному в интернете. Это привело к началу формирования взаимосвязанной системы сайтов, которая выросла до сегодняшних масштабов. От этого и произошло название HTML - Hyper Text Markup Language. На русский язык эту фразу переводят как "язык гипертекстовой разметки".

Начало развития

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

Основные элементы

Что такое HTML, если рассматривать его изнутри? Любой файл HTML - это обычный текстовый документ. В основе его разметки лежат теги. Зачастую они представляют собой парные конструкции, которые предназначены для изменения свойств информации (причем не только текстовой). Например, если написать в теле html-файла: "Любое слово", браузер отобразит написанное курсивом.

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

В помощь программисту

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

Хотя подобные решения и позволяют часто достичь тех же результатов, что и при работе в текстовом редакторе, все же знание веб-мастером языка HTML необходимо. Даже самые последние версии специализированных приложений не всегда оптимально вставляют теги. Поэтому без ручной правки кода не обходится ни один проект.

CSS

Ответ на вопрос: "Что такое HTML-разметка?" дан. Как отмечалось ранее, теги позволяют изменять оформление информации, например, задавать размер шрифтов, цвет, их семейство. Данных параметров может быть очень много, и если нужно использовать каждое их сочетание более одного раза, один и тот же код приходится дублировать.

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

Что немаловажно: если нужно изменить какой-либо один параметр в наборе, достаточно отредактировать единственную строку. При этом вид всех блоков будет модифицирован.

Средства CSS побладают расширенными возможностями для оформления сайтов, с которыми чистый HTML не сравнится.

Сложности разработки

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

Построение сложных страниц может быть выполнено двумя подходами:

  • Первый предполагает создание таблиц, в ячейках которых располагается информация.
  • Второй основан на слоях или блоках. Что такое HTML-слой? Это абсолютно произвольная область. Размер и расположение никак не ограничены.

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

JavaScript

HTML-разметка без каких-либо дополнений позволяет создавать страницы со статичной информацией. Чтобы сделать сайты интерактивными, к существующим стандартам был добавлен язык сценариев под названием JavaScript. В нем используется концепция объектов, к которым могут применяться методы и функции во время какого-либо события. Например, главный объект с точки зрения JavaScript - это Window. HTML-страница может быть закрыта, если применить к нему метод "close".

Основные преимущества языка сценариев:

  • Простота освоения: не обязательно быть программистом, чтобы написать несколько строчек рабочего кода.
  • Выполнение программы после определенных событий. Например, вы можете определить, что функция должна выполняться только тогда, когда веб-страница полностью загрузится или когда пользователь щелкнет мышью по определенному блоку.
  • Динамическое изменение HTML-разметки.
  • Определение браузера. Это очень удобно, когда для каждого обозревателя создана своя версия сайта. Программа отправит пользователя "Мозиллы" по одному адресу, а пользователя "Оперы" - по другому.
Вместо заключения

Вопрос: "Что такое HTML?" раскрыт. Надо сказать, что статья не описывает и меньшей части всех возможностей гипертекстовой разметки. Чтобы разобраться в большинстве тонкостей, нужно прочесть не одну книгу, а теорию совмещать с практикой.

Не будем вдаваться в подробности и историю что такое HTML, а сразу перейдем основным моментам. HTML — это основа построения любого сайта! При изучении темы сайтостроения необходимо начинать именно с него. Здесь нет ничего тяжелого. Освоить данную технологию сможет АБСОЛЮТНО КАЖДЫЙ!

Сразу хочу заметить, что это НЕ язык программирования, а язык разметки.

Почему выучить HTML легко?

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

Давайте приступим к изучению этой увлекательной, и одновременно простой, технологии.

Немного теории…

Любая страница состоит из тегов. То есть страница выглядит на самом деле не так как мы привыкли это видеть, а состоит из множества тегов, каждый из которых, играет определенную роль.

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

Но что такое тег в HMTL?

Это элемент HTML страницы, который так или иначе влияет на отображение и разметку страницы. На словах понять это достаточно сложно, поэтому необходимо сразу все смотреть именно на практике и привыкать к коду. Посмотрите на изображение ниже:

Это структура самой простой страницы. А вот эти повторяющиеся слов в треугольных скобках — это и есть теги. Если Вы откроете свой текстовый редактор и напишете данный код, а затем сохраните в формате HTML, то у Вас получится HTML страничка. Пока что не понятно что такое HTML? 🙂

Из этой структуры можно увидеть те теги, которые должны обязательно присутствовать. Это теги:

  • и закрывающий
  • и закрывающий
  • и закрывающий

Чтобы было более наглядно, я выделил их оранжевым цветом на изображении ниже:

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

А вот все теги, которые мы будем писать между тегами и , в зависимости от его предназначения, будет влиять именно на структуру нашей HTML страницы.

Ну что, стало более понятно что такое HTML? 😉 Но мы не останавливаемся и движемся дальше…

Некоторые теги могут иметь закрывающий тег, а некоторые нет. Например тега есть закрывающий тег . Как Вы могли уже догадаться, закрываются теги с помощью наклонной черты.

Очень важно соблюдать открытие и закрытие тегов. Чтобы не было ошибок. Браузер ошибку может и не показать, а вот структура Вашей страниц будет неправильной и при дальнейшей работе со стилями (где займемся внешним видом) будут большие проблемы. Поэтому если у тега есть закрывающий тег, то он обязательно должен присутствовать в правильном месте.

Давайте на примере разберем как НЕ надо закрывать теги и в каком порядке это необходимо делать. Пример двух тегов:

Правильный HTML КОД

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

ОШИБКА В HTML КОДЕ

Так закрывать теги категорически запрещается !

Практика, чтобы понять что такое HTML…

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

Начнем. После открытия программы вы увидите такое окошко:

Чтобы создать HTML страницу, необходимо ввести "тело" страницы в данное окошко. Вы можете скопировать текст ниже и просто вставить его. Но лучше введите все руками. Так Вы сможете быстрее запомните и привыкнете к тегам.

Итак, у вас должно получиться следующее:

Далее необходимо сохранить данную страницу в HTML формате. Для этого нажимаем в меню "Файл", здесь жмем "Сохранить как…". Вводим имя HTML страницы. Я назвал ее index.html. Затем просто сохраняем в удобное место у себя на компьютере. После этого появится подсветка HTML тегов, потому что редактор Notepad++ поймет что это HTML документ. А с подстветкой работать гораздо приятнее.