для чего предназначены html и css файлы
Профессия веб-программист включает в себя навыки из разных областей создания сайтов.
Настоящий профессионал всегда идет ОТ ПРОСТОГО К СЛОЖНОМУ. Не существует единого правильного стандарта, и каждый человек выбирает и адаптирует свой собственный подход в обучении программированию.
Однако есть набор практик-шагов, помогающих создать ПРОЧНЫЙ БАЗОВЫЙ ФУНДАМЕНТ, и помогает в подавляющем большинстве случаев.
Основные HTML-теги, CSS-стили. Работа в редакторе кода SublimeText. Адаптивная верстка сайтов под мобильные устройства. Создание верстки сайта и правильной HTML-разметки для SEO.
2. Верстка на HTML/CSS-фреймворке Bootstrap
Базовый фундамент для профессионального программиста. Понимание Объектно-Ориентированного Программирования. Построение архитектуры базы данных. Безопасность сайта. Подробнее
4. Терминал Linux /контроль версий кода GIT
Работа с терминалом Linux для настройки серверов ваших сайтов. Система контроля версий кода GIT для командной работы над проектами. Синхронизация кода вашего сайта с GIT-репозиторием.
5. Создание сайта на PHP-фреймворке CodeIgniter
Как сделать сайт более оживленным и быстрым. Интеграция кода JS для живости сайта. Работа с плагинами jQuery.
Научитесь верстать
Азы веб-разработчика начинаются с верстки, чтобы научиться верстать вам необходимо освоить HTML и CSS.
Что такое HTML
Другими словами в начале работы, используя язык HTML вы РАЗМЕЧАЕТЕ, ГДЕ будут размещены элементы: заголовок, картинки, меню, текст и т.д. Эту работу можно сравнить с созданием макета-чертежа, который понятен вашему компьютеру.
Что такое CSS
Продолжим наш пример-аналогию с плакатом-визиткой о себе.
Наметив расположение элементов, вы переходите к ДЕТАЛЯМ: оформлением цветом, подбор шрифтов, рамочек, выбор фона и т.д.
Что же такое верстка?
Верстка сайта — это процесс создания визуальной части сайта, без функциональной составляющей сайта. Сверстанную страницу можно будет открыть в браузере, она будет выглядеть как сайт, но если вы нажмете например на кнопку, то ничего не произойдет.
Когда вы уверенно научитесь использовать этими базовыми инструментами, то легко сможете создавать простые веб-страницы, понимая как происходит размещение элементов, как можно их перемещать, изменять их внешний вид, используя язык HTML и каскадную таблицу стилей CSS.
Подведем итоги
Обладая знаниями по вёрстке и обязательно потренировавшись, создав несколько шаблонов сайтов на разные тематики, применив разные стили, цвета, размещение элементов, можно начать работать верстальщиком или создавать шаблоны сайтов на заказ (фриланс).
Пройти полный курс HTML/CSS и освоить базовый фундамент по верстке вы можете на нашем сайте он-лайн в удобном для себя графике.
Как достичь результатов при создании своей карьеры, где взять силы и как с наибольшей эффективностью использовать свое время, читайте здесь: Сила цели или как включить свои ресурсы?
Обзор языка разметки HTML для новичков
С аббревиатурой HTML сталкиваются специалисты, которым по роду деятельности приходится делать сайты, наполнять их контентом и продвигать в поисковых системах. Копирайтеры используют этот язык для форматирования текстов и таблиц, а SEO-специалисты с его помощью подключают виджеты и системы аналитики.
Что представляет собой HTML
Формально HTML (Hypertext Markup Language) считается языком разметки веб-страниц. Результат интерпретируется браузером, и пользователь видит текст на экране компьютера или смартфона в заданном разработчиком виде. Первые сайты создавались практически на «чистом» коде HTML при незначительном включении скриптов на JavaScript.
Базовое знание HTML требуется для большинства вакансий, касающихся работы с сайтами, их наполнением и продвижением.
История развития HTML
Точной даты создания языка HTML нет, его появление соотносится с периодом между 1986 и 1991 годами. Он изначально создавался для использования людьми без специальных знаний в верстке и программировании. Сложная система разметки SGML (Standard Generalized Markup Language) была сведена к небольшому набору дескрипторов. Они чаще называются тегами.
К актуальной относится версия HTML 5-го поколения. Она появилась в декабре 2012 года и выросла до релиза 5.3. Именно это поколение языка разметки поддерживается большинством браузеров. При использовании устаревших версий вероятно искаженное отображение. Существует понятие кроссбраузерной несовместимости сайта, когда он по-разному выглядит на разных устройствах.
Изменения преимущественно касались внедрения новых функций. Например, появилась поддержка ввода типов данных – даты и времени, адреса электронной почты, домена сайта. Также в новые релизы включили дополнительные элементы вроде добавления видео и звука на веб-страницу, рисования в указанной области при помощи скрипта JavaScript.
Возможности HTML
Особенность языка разметки HTML заключается в преобразовании простых команд в визуальные объекты. Например, тег используется для отображения картинок. В перечне атрибутов есть обязательный – ссылка на файл. Изображение же обычно хранится на накопителе удаленного сервера, где располагается сам ресурс или внешний сервис.
Основные элементы HTML:
Также есть простейшее понятие создания форм – ввод текстовой информации, выбор пункта списка. Более сложные объекты принято создавать на JavaScript или PHP, так как эти языки более функциональны. В рамках практического применения HTML интересен копирайтеру или контент-менеджеру при публикации контента.
Что не получится сделать на HTML
Несмотря на относительно обширный список возможностей по форматированию страниц, в HTML нет целого перечня функций. Например, теги позволяют оперировать стандартным шрифтом, а вот заменить его не получится. Компенсируют функционал подключением таблицы стилей CSS – это отдельный язык описания внешнего вида HTML-документов.
Стили компенсируют недостатки технологии:
В итоге дизайн ресурса становится более интересным, скорость загрузки возрастает за счет меньшей нагрузки на сервер. Вместо дублирования кода на каждой странице при использовании HTML есть возможность вставлять небольшую ссылку на нужный участок кода. При изменении шаблона файл CSS остается неизменным, что упрощает редактирование сайта.
Сам по себе HTML работает довольно «топорно», требует дублирования команд на каждой странице. Это нерационально, например, при формировании общих элементов типа шапки, подвала, общего меню. Технология CSS позволила создавать фирменное оформление независимо от шаблона. Стоит подключить нужный участок кода, и страница преображается.
Интеграции других инструментов в HTML
Удобство языка разметки упростило интеграцию сторонних сервисов. Например, на сайт легко встроить системы аналитики Яндекс.Метрика и Google Analytics. То же относится и к функциональным блокам – форме захвата контактов, подписки на новости, заказу обратного звонка. Пользователи не замечают какой-либо разницы, они видят результат.
Наиболее востребованные интеграции:
Такие возможности и приводят к мнению, что HTML – это язык программирования. Спецификация предполагает только управление отображением содержания сайта, а остальные функции зависят от подключаемых программных модулей. Изучается язык разметки буквально за пару дней, но приходится учитывать его ограничения.
HTML, CSS и JavaScript в вебе (поймут даже чайники)
Вы время от времени задумываетесь, как работает программирование, но не делали ничего сложнее в Интернете, чем загрузка фотографии в Facebook? Тогда вы в нужном месте.
Собственно, вы можете.
Что такое язык программирования?
Программирование в веб-разработке
HTML и CSS на самом деле всего лишь структура страницы и информация о стиле. Прежде чем перейти к JavaScript и другим языкам программирования, необходимо знать основы HTML и CSS, поскольку они находятся на передней части каждой веб-страницы и приложения.
В самом начале 1990-х годов HTML был единственным языком, доступным в Интернете. С тех пор многое изменилось и теперь одним из самых распространенных языков программирования является JavaScript.
HTML отображает язык разметки гипертекста. «Язык разметки» означает, что HTML использует теги для идентификации различных типов контента и целей, которые каждый преследует на веб-странице.
Взгляните на статью ниже. Если бы мы попросили вас структурировать текст, вы, вероятно, легко бы справились: наверху находится заголовок, затем подзаголовок, основной текст и изображения внизу.
Для разметки разметки используются HTML-теги, также известные как «элементы». Они имеют довольно интуитивные типы: заголовки, теги абзацев, теги изображений и т. д.
Каждая веб-страница состоит из нескольких тегов HTML, обозначающих определенный тип контента на странице. Каждый тип содержимого на странице «обернут», т. е. окружен тегами.
Например, слова, которые вы сейчас читаете, являются частью абзаца. Если кодировать эту страницу с нуля, этот абзац начался бы с тега абзаца открытия:
. Часть «тега» обозначается открытыми скобками, а буква «p» сообщает компьютеру, что мы открываем абзац вместо какого-либо другого типа содержимого.
Используя HTML, вы можете добавлять заголовки, форматировать абзацы, разрывы строк, создавать списки, выделять текст, создавать специальные символы, вставлять изображения, создавать ссылки, создавать таблицы, управлять некоторым стилем и многое другое.
Чтобы узнать больше о HTML, можно ознакомиться с руководством по базовому HTML или использовать бесплатные классы и ресурсы на codecademy, но пока перейдем к CSS.
Что такое CSS: объясняем простыми словами
Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.
Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.
Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам.
CSS и стили
CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:
Стили можно разметить внутри тега или использовать отдельный CSS-файл.
Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:
А так CSS прописывается при помощи тега и в теге документа HTML.
Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде
После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда.
Синтаксис CSS
У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой.
Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:
В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.
Каскады в CSS
И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:
При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:
Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:
Чтобы использовать все параметры, в HTML указываем:
Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:
1 — низкий приоритет, 3 — высокий.
Приоритеты в CSS
Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:
Методологии CSS
Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.
Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.
Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.
Будущее CSS
CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.
Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.
Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.
Встречая аббревиатуру CSS впервые, новички уже догадываются, что это как-то связано с сайтами. Разберёмся: CSS — Cascading Style Sheets — это каскадные таблицы стилей. По сути — язык, который отвечает за описание внешнего вида HTML-документа. Подавляющее большинство современных веб-сайтов работают на основе связки HTML+CSS.
Теперь ответим на вопрос о том, что делает CSS. Всё просто: если HTML структурирует контент на странице, то CSS позволяет отформатировать его, сделать более привлекательным для читателя. Изначально веб-разработчики использовали исключительно HTML — так было на заре развития интернет-технологий. С помощью разметки можно было выделить параграф, заголовок, изменить начертание текста. А большего и не требовалось.
Со временем этих возможностей стало мало — и появилась технология форматирования без изменения самого содержимого и структуры документа. CSS решил проблему «зоопарка» тегов форматирования, когда разные браузеры поддерживали разные теги. Их унификация и единая база упростили работу с веб-документами и облегчили жизнь веб-мастерам.
CSS и стили
CSS используется для определения стилей (правил) оформления документов — включая дизайн, вёрстку и вариации макета для различных устройств и размеров экрана. У такого способа форматирования несколько достоинств:
Стили можно разметить внутри тега или использовать отдельный CSS-файл.
Вот так можно прописать CSS в качестве атрибута непосредственно в HTML:
А так CSS прописывается при помощи тега и в теге документа HTML.
Современный способ оформления веб-документов вошёл в практику в 2011 году. Это свойство CSS grid — теперь оно поддерживается практически всеми браузерами. И если раньше приходилось верстать документы с использованием элементов вроде
После того как этот способ стал стандартом, проблема разделения содержания (HTML) и оформления (CSS) решилась раз и навсегда.
Синтаксис CSS
У языка CSS относительно простой синтаксис. Сначала прописывается селектор — он выбирает конкретный элемент на странице. Потом, после фигурных скобок, указываются свойства со значениями — между ними ставится двоеточие. Сами свойства отделяются друг от друга точкой с запятой.
Что такое селектор в CSS? Это конструкция, которая позволяет выбрать отдельные или однотипные элементы на странице, чтобы их стилизовать. С селектора начинается каждый блок объявлений в CSS:
В качестве селектора в примере используется my-class. Все элементы с этим классом получают единое оформление — серый фон цвета #999.
Каскады в CSS
И всё-таки почему CSS — это именно Cascading Style Sheets? Дело в том, что в единую схему стили организуются при помощи каскада. Вот простой пример, который также поможет понять, что такое CSS-код и как он выглядит:
При помощи каскадов мы присвоили элементу p красный цвет. Зелёный цвет, указанный выше красного, учитываться не будет. Используется то значение параметра, которое указано ниже, и это помогает избежать конфликтов. При этом размер шрифта — 20 пикселей — не меняется. Если упростить написанное выше, то получится:
Кроме того, один элемент можно сделать зависимым от нескольких селекторов разного типа. Пример:
Чтобы использовать все параметры, в HTML указываем:
Здесь мы присвоили элементу следующие свойства: он красный, размером 20 пикселей и написан курсивом. Важно, что в данном случае у разных селекторов — разный приоритет. Их порядок:
1 — низкий приоритет, 3 — высокий.
Приоритеты в CSS
Обговорим подробнее вопрос приоритетов. Их иерархия работает следующим образом:
Методологии CSS
Начинающему веб-мастеру для работы с CSS достаточно просто знать, что такое стили и как их использовать, изучить основные свойства и способы их задавать. А вот при работе с большими проектами уже необходимо использовать специализированные инструменты, а также чёткие стандарты написания CSS. Иначе другие разработчики просто не смогут нормально обслуживать код.
Единой методологии CSS нет. Существует несколько вариантов, и задача разработчика — выбрать ту методологию, которая оптимально ему подходит. Но сначала стоит разобраться с основами, научиться работать с CSS. Кстати, новые варианты появляются не так уж редко, так что за новинками стоит следить.
Наиболее популярные современные методологии CSS — это Atomic CSS (Functional CSS) и CSS в JavaScript. В основе первого варианта лежит использование максимального количества базовых классов, чтобы как можно чаще применять их повторно. Сторонники второго варианта считают, что стили CSS стоит определять не в отдельной таблице, а внутри каждого компонента.
Будущее CSS
CSS постоянно развивается — сейчас активно разрабатывается уже третье поколение этого стандарта. В нём спецификация разделяется на модули, причём разработка и развитие каждого из них идут независимо. Разработчики современных браузеров постепенно расширяют поддержку стандарта CSS3.
Несколько лет назад начало формироваться и четвёртое поколение стандарта CSS, но пока спецификации находятся на уровне драфтов.
Все премудрости CSS, HTML и их совместного использования вы можете освоить на отдельном интерактивном курсе GeekBrains. В течение месяца вы научитесь верстать статические сайты, освоите блочную вёрстку, препроцессор Less, Bootstrap и другие полезные инструменты.
Для чего предназначены html и css файлы
Reg.ru: домены и хостинг
Крупнейший регистратор и хостинг-провайдер в России.
Более 2 миллионов доменных имен на обслуживании.
Продвижение, почта для домена, решения для бизнеса.
Более 700 тыс. клиентов по всему миру уже сделали свой выбор.
Бесплатный Курс «Практика HTML5 и CSS3»
Освойте бесплатно пошаговый видеокурс
по основам адаптивной верстки
на HTML5 и CSS3 с полного нуля.
Фреймворк Bootstrap: быстрая адаптивная вёрстка
Пошаговый видеокурс по основам адаптивной верстки в фреймворке Bootstrap.
Научитесь верстать просто, быстро и качественно, используя мощный и практичный инструмент.
Верстайте на заказ и получайте деньги.
Что нужно знать для создания PHP-сайтов?
Ответ здесь. Только самое важное и полезное для начинающего веб-разработчика.
Узнайте, как создавать качественные сайты на PHP всего за 2 часа и 27 минут!
Создайте свой сайт за 3 часа и 30 минут.
После просмотра данного видеокурса у Вас на компьютере будет готовый к использованию сайт, который Вы сделали сами.
Вам останется лишь наполнить его нужной информацией и изменить дизайн (по желанию).
Изучите основы HTML и CSS менее чем за 4 часа.
После просмотра данного видеокурса Вы перестанете с ужасом смотреть на HTML-код и будете понимать, как он работает.
Вы сможете создать свои первые HTML-страницы и придать им нужный вид с помощью CSS.
Бесплатный курс «Сайт на WordPress»
Хотите освоить CMS WordPress?
Получите уроки по дизайну и верстке сайта на WordPress.
Научитесь работать с темами и нарезать макет.
Бесплатный видеокурс по рисованию дизайна сайта, его верстке и установке на CMS WordPress!
Хотите изучить JavaScript, но не знаете, как подступиться?
После прохождения видеокурса Вы освоите базовые моменты работы с JavaScript.
Развеются мифы о сложности работы с этим языком, и Вы будете готовы изучать JavaScript на более серьезном уровне.
*Наведите курсор мыши для приостановки прокрутки.
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):
Здесь, как вы можете видеть, путь до подключаемого файла указывается в круглых скобках после слова url.
3. Третий способ используется в случае, когда стили CSS расположены внутри того документа, к которому они должны применяться. В этом случае стили должны находиться в этом документе внутри тэгов style (которые, в свою очередь, должны находиться внутри тэгов head):
В примере выше внутри тэгов 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 расшифровывается как Hypertext PreProcessor (что-то вроде «преобработчик HTML»).
Это значит, что клиентские языки работают в браузере каждого конкретного человека. Типичным представителем клиентских языков является JavaScript, о котором Вы наверняка слышали.
Все действия и команды, которые мы задаем, скажем, на языке JavaScript, выполняются браузером (для упрощения мы не рассматриваем серверный JavaScript).
В случае с серверными языками (к которым и относится 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.
Для того чтобы сообщить веб-серверу о том, что должна быть произведена обработка 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!» внутри браузера:
Располагать JavaScript-код можно и внутри тэга. Спецификация HTML описывает набор атрибутов, используемых для задания обработчиков событий. Рассмотрим такой пример:
В примере выше при нажатии на ссылку «Удалить» функция confirm(‘Вы уверены?’); вызывает модальное окно с надписью «Вы уверены?».
При этом при отрицательном ответе (т.е. «нет», если мы не уверены) происходит блокировка перехода по ссылке.
Обратите внимание, что такая практика использования JavaScript не считается хорошей.
Правильным вариантом применения JavaScript был бы такой подход. Сперва мы снабжаем идентификатором (id=»alertLink») ссылку:
В этом примере мы создаем функцию, срабатывающую при загрузке веб-страницы. Эта функция находит элемент с идентификатором alertLink и отслеживает событие клика по нему (т.е. по ссылке «Удалить»).
По событию клика мы выводим модальное окно с уже знакомым нам сообщением.
Возможно, данный пример покажется вам немного сложным, если вы ничего не знаете о JavaScript, но на данном этапе это не так важно.
Важно, чтобы вы поняли сам принцип, подход к работе при использовании JavaScript.
И, наконец, как я и обещал чуть выше, давайте рассмотрим, как можно подключить JavaScript из внешнего файла.
После такой манипуляции нам будут доступны все функции, которые были написаны нами в 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. В большинстве случаев вы также будете работать именно с ней.
Рассмотрим теперь понятие реляционной базы данных.
На сегодняшний день так называемые реляционные базы данных являются самыми популярными.
Под «отношением» понимается связь между различными таблицами, входящими в базу данных.
Таблица имеет некоторое ограниченное количество столбцов (как правило, небольшое) и сколь угодно много строк.
Каким образом можно вставлять новые данные в базу, изменять их, удалять и производить иные манипуляции?
С его помощью мы можем выполнить практически любую операцию: начиная от создания базы данных и заканчивая выборкой из базы любого набора информации.
Как правило, 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.
Понравился материал и хотите отблагодарить?
Просто поделитесь с друзьями и коллегами!