Как создать сайт на css
Перейти к содержимому

Как создать сайт на css

  • автор:

Создание первой веб-страницы

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

Что такое HTML и CSS?

HTML (HyperText Markup Language, язык разметки гипертекста) задаёт структуру содержимого и его смысл, определяя такой контент как, к примеру, заголовки, абзацы или изображения. CSS (Cascading Style Sheets) или каскадные таблицы стилей — это язык презентаций созданный для оформления внешнего вида контента, использующий, например, шрифты или цвета.

Эти два языка — HTML и CSS независимы друг от друга и должны таковыми и оставаться. CSS не должен быть написан внутри HTML-документа и наоборот. Как правило, HTML всегда будет представлять содержимое, а CSS всегда будет определять его оформление.

При таком понимании разницы между HTML и CSS давайте погрузимся в HTML более подробно.

Основные термины HTML

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

Элементы

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

); в список можно включить элементы , , , и и многие другие.

Элементы идентифицируются с помощью угловых скобок <>, окружающих имя элемента. Таким образом, элемент будет выглядеть так:

Теги

Добавление угловые скобок < и >вокруг элемента создаёт то, что известно как тег. Теги наиболее часто встречаются в парах открывающих и закрывающих тегов.

Открывающий тег отмечает начало элемента. Он состоит из символа ; например, .

Закрывающий тег отмечает конец элемента. Он состоит из символа < с последующей косой чертой и именем элемента и завершается символом >; например,

.

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

Так, теги ссылок будут выглядеть примерно так:

Атрибуты

Атрибуты являются свойствами, применяемыми для предоставления дополнительной информации об элементе. Наиболее распространённые атрибуты включают в себя атрибут id , который идентифицирует элемент; атрибут class , который классифицирует элемент; атрибут src , который определяет источник встраиваемого содержимого; и атрибут href , который указывает ссылку на связанный ресурс.

Атрибуты определяются в открывающем теге после имени элемента. В общем, атрибуты включают в себя имя и значение. Формат для этих атрибутов состоит из имени атрибута со знаком равенства за ним, а затем в кавычках идёт значение атрибута. Например, элемент с атрибутом href будет выглядеть следующим образом:

Демонстрация основных терминов HTML

Данный код будет отображать текст «Shay Howe» на веб-странице и при щелчке на этот текст ведёт пользователя на http://shayhowe.com. Элемент ссылки объявлен с помощью открывающего тега и закрывающего тега охватывающих текст, а также атрибута и значения адреса ссылки объявленной через href=»http://shayhowe.com» в открывающем теге.

Синтаксис HTML в виде схемы включает элемент, атрибут и тег

Рис. 1.01. Синтаксис HTML в виде схемы включает элемент, атрибут и тег

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

Настройка структуры документа HTML

HTML-документы представляют собой простые текстовые документы, сохранённые с расширением .html, а не .txt. Чтобы начать писать HTML вначале нужен текстовый редактор, который вам удобен в использовании. К сожалению, сюда не входит Microsoft Word или Pages, поскольку это сложные редакторы. Двумя наиболее популярными текстовыми редакторами для написания HTML и CSS являются Dreamweaver и Sublime Text. Бесплатные альтернативы также Notepad++ для Windows и TextWrangler для Mac.

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

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

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

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

    Привет, мир!  

Привет, мир!

Это веб-страница.

Демонстрация структуры HTML-документа

Этот код показывает документ, начиная с объявления типа документа, , затем сразу идёт элемент . Внутри идут элементы и . Элемент содержит кодировку страницы через тег и название документа через элемент . Элемент включает в себя заголовок через элемент и абзац текста через . Поскольку и заголовок и абзац вложены в элемент , они видны на веб-странице.

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

Самозакрывающиеся элементы

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

Приведённая структура, сделанная с помощью объявления типа документа и элементов , и , является довольно распространённой. Мы хотим сохранить эту структуру документа удобной, поскольку будем часто её применять при создании новых HTML-документов.

Валидация кода

Независимо от того, насколько аккуратно мы пишем наш код, ошибки неизбежны. К счастью, при написании HTML и CSS у нас есть валидаторы для проверки нашей работы. W3C предлагает валидаторы HTML и CSS, которые сканируют код на ошибки. Проверка нашего кода не только помогает правильно отображать его во всех браузерах, но и помогает обучению передовому опыту при написании кода.

На практике

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

  1. Откройте текстовый редактор, создайте новый файл с именем index.html и сохраните его в место, которое не забудете. Я собираюсь создать папку на рабочем столе с именем styles- conference и сохранить этот файл в ней; не стесняйтесь делать то же самое.
  2. В файле index.html добавим структуру документа, в том числе тип документа и элементы , и .

  Styles Conference 
 

Styles Conference

Каждый год самые яркие веб-дизайнеры и фронтенд-разработчики собираются в Чикаго, чтобы обсудить новейшие технологии. Присоединяйся к нам этим августом!

Наши первые шаги при создании сайта Styles Conference

  • Пришло время взглянуть на то, что мы сделали! Отыщем наш файл index.html (у меня он находится в папке styles-conference на рабочем столе). Дважды щёлкнув по этому файлу или перетащив его в браузер мы откроем его для просмотра. Рис. 1.02. Наши первые шаги при создании сайта Styles Conference
  • Давайте переключимся немного, отойдя от HTML и взглянем на CSS. Помните, HTML определяет содержимое и структуру наших веб-страниц, в то время как CSS определяет их визуальный стиль и внешний вид.

    Основные термины CSS

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

    Селекторы

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

    Селекторы, как правило, связаны со значением атрибута, вроде значения id или class или именем элемента, вроде или .

    В CSS селекторы сочетаются с фигурными скобками <>, которые охватывают стили, применяемые к выбранному элементу. Этот селектор нацелен на все элементы

    .

    Свойства

    Как только элемент выбран, свойство определяет стили, которые будут к нему применены. Имена свойств идут после селектора, внутри фигурных скобок <> и непосредственно перед двоеточием. Существует множество свойств, которые мы можем использовать, такие как background , color , font-size , height и width и другие часто добавляемые свойства. В следующем коде мы определяем свойства color и font-size , применяемые ко всем элементам

    .

    Значения

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

    и устанавливаем значение свойства color как orange , а значение свойства font-size как 16 пикселей.

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

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

    Структура синтаксиса CSS включает селектор, свойства и значения

    Рис. 1.03. Структура синтаксиса CSS включает селектор, свойства и значения

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

    Работа с селекторами

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

    Селекторы типа

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

    Классы

    Классы позволяют выбрать элемент на основе значения атрибута class . Селекторы классов немного более конкретны, чем селекторы типа, так как они выбирают определённую группу элементов, а не все элементы одного типа.

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

    В CSS классы обозначаются с точкой впереди, за которой следует значение атрибута класса. Ниже селектор класса выбирает все элементы, содержащие значение awesome атрибута class , включая элементы и

    .

    .awesome
    Идентификаторы ещё точнее, чем классы, так как они нацелены только на один уникальный элемент за раз. Подобно тому, как селекторы классов используют значение атрибута class , идентификаторы используют значение атрибута id в качестве селектора.

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

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

    #shayhowe

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

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

    Подключение CSS

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

    Другие варианты добавления CSS

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

    Для создания нашей внешней таблицы стилей мы снова хотим использовать выбранный текстовый редактор, чтобы создать новый текстовый файл с расширением .css. Наш CSS-файл должен быть сохранён в той же папке или подпапке, где находится и наш HTML-файл.

    Внутри элемента применяется элемент , который определяет отношения между HTML и CSS-файлами. Поскольку мы связываем с CSS, то используем атрибут rel со значением stylesheet для указания их отношений. Кроме того, атрибут href применяется для указания местоположения или пути к CSS-файлу.

    В следующем примере HTML-документа элемент указывает на внешний стилевой файл.

    Чтобы CSS отображался правильно, значение пути атрибута href должно напрямую совпадать с тем, где сохранён CSS-файл. В предыдущем примере файл main.css хранится в том же месте, что и HTML-файл, известном также как корневая папка.

    Если CSS-файл располагается в подпапке, то значение атрибута href должно, соответственно, соотноситься с этим путём. Например, если наш файл main.css был сохранён в подпапке с именем stylesheets, то значеним атрибута href будет stylesheets/main.css . Здесь используется косая черта (или слэш), чтобы указать перемещение в подпапку.

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

    Использование сброса CSS

    Каждый браузер имеет свои собственные стили по умолчанию для различных элементов. То, как Google Chrome отображает заголовки, абзацы, списки и так далее, может отличаться от того, как это делает Internet Explorer. Для обеспечения совместимости с разными браузерами стал широко использоваться сброс CSS.

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

    Есть куча разных сбросов CSS доступных для применения, у всех них есть свои сильные стороны. Один из самых популярных от Эрика Мейера, его сброс CSS адаптирован для включения новых элементов HTML5.

    Если вы чувствуете себя немного авантюристом, есть также Normalize.css, созданный Николасом Галлахером. Normalize.css фокусируется не на использовании жёсткого сброса для всех основных элементов, но вместо этого на установлении общих стилей для этих элементов. Это требует более глубокого понимания CSS, а также знания того, что вы хотели бы получить от стилей.

    Кроссбраузерность и тестирование

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

    Существует несколько вещей, на которые следует обращать внимание при написании CSS. Хорошей новостью является то, что это всё по силам и нужно немного терпения чтобы это освоить.

    На практике

    Вернёмся назад, где мы в последний раз остановились на нашем сайте конференции и посмотрим, как мы можем добавить немного CSS.

    1. Внутри нашей папки styles-conference давайте создадим новую папку с именем assets. В ней мы будет хранить все ресурсы для нашего веб-сайта, такие как стили, изображения, видео и т. д. Для наших стилей пойдём дальше и добавим ещё одну папку stylesheets внутри папки assets.
    2. Используя текстовый редактор создадим новый файл с именем main.css и сохраним его в папке stylesheets, которую мы только что создали.
    3. Просматривая файл index.html в браузере мы можем видеть, что элементы и

      уже содержат стиль по умолчанию. В частности, у них задан уникальный размер шрифта и пространство вокруг них. Используя сброс Эрика Мейера мы можем смягчить эти стили, что позволит каждому из них начинать с одинаковой базы. Для этого загляните на его сайт, скопируйте код и вставьте его в верхней части нашего файла main.css.

    /* http://meyerweb.com/eric/tools/css/reset/ 2. v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video < margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; >/* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section < display: block; >body < line-height: 1; >ol, ul < list-style: none; >blockquote, q < quotes: none; >blockquote:before, blockquote:after, q:before, q:after < content: ''; content: none; >table
      Styles Conference 

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

    Наш сайт Styles Conference со сбросом CSS

    Рис. 1.04. Наш сайт Styles Conference со сбросом CSS

    Демонстрация и исходный код

    Ниже вы можете просмотреть сайт Styles Conference в его нынешнем состоянии, а также скачать исходный код сайта на данный момент.

    Резюме

    Итак, всё хорошо! Мы сделали несколько больших шагов в этом уроке.

    Подумать только, теперь вы знаете основы HTML и CSS. Поскольку мы продолжим и вы потратите больше времени на написание HTML и CSS, вам станет гораздо комфортнее работать с этими двумя языками.

    Напомним, что мы рассмотрели следующее:

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

    Теперь давайте поближе рассмотрим HTML и познакомимся немного с семантикой.

    Ресурсы и ссылки

    • Common HTML terms via Scripting Master
    • CSS Terms & Definitions via Impressive Webs
    • CSS Tools: Reset CSS via Eric Meyer
    • Normalize.css via Nicolas Gallagher
    • An Intro to HTML & CSS via Shay Howe

    См. также

    • Валидный HTML-документ
    • Введение в CSS
    • Введение в HTML
    • Делаем наш первый сайт
    • Добавление стилей на веб-страницу
    • Зачем нужен CSS
    • Сброс CSS
    • Структура HTML-кода
    • Что всё это значит?
    • Элементы HTML

    Как сделать адаптивный сайт с помощью HTML и CSS: пошаговое руководство

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

    Алексей Кодов
    Автор статьи
    26 сентября 2023 в 8:37

    Сегодня мы рассмотрим, как создать адаптивный сайт с использованием HTML и CSS. Эта статья подойдёт для тех, кто только начинает своё знакомство с веб-разработкой и хочет разобраться, как сделать адаптивную верстку. Поехали! ��

    Что такое адаптивная верстка?

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

    Создание адаптивного макета сайта

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

    Использование HTML и CSS для адаптивной верстки

    Теперь, когда у вас есть макет, можно приступить к разработке сайта. HTML используется для создания структуры веб-страниц, а CSS — для стилизации и размещения элементов на странице.

    Как подключить CSS к HTML

    Для начала вам нужно знать, как подключить CSS к HTML. Детальная инструкция на эту тему есть в нашей статье о подключении CSS к HTML.

    Создание сайта с использованием CSS-сеток

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

    Практика и обучение

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

    Создание адаптивного сайта с помощью HTML и CSS — это просто первый шаг в мир веб-разработки. Но даже эти базовые навыки могут открыть вам двери в мир технологий. Удачной разработки! ��

    Введение в CSS вёрстку

    В этой статье мы рассмотрим некоторые функции макета CSS, которые мы затрагивали в предыдущих статьях, например различные значения свойства display , и разберём некоторые концепции, которые будут рассмотрены в этой статье.

    Требования: Базовые знания HTML (изучите введение в HTML), и понимание как работает CSS (изучите введение в CSS.)
    Цель: Предоставить вам обзор методов компоновки страниц CSS. Каждый метод может быть изучен более подробно в последующих статьях.

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

    • Нормальный поток
    • Свойство display
    • Flexbox
    • Grid
    • Floats
    • Позиционирование
    • Макет таблицы
    • Многоколоночный макет

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

    Normal flow

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

    p>I love my cat.p> ul> li>Buy cat foodli> li>Exerciseli> li>Cheer up friendli> ul> p>The end!p> 

    По умолчанию ваш браузер выведет этот код следующим образом:

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

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

    Примечание: Направление, в котором отображается содержимое блока, называется Block Direction. Block Direction вертикально в языках типа Английского, имеющих горизонтальное направление письма. В языках, типа Японского, имеющих вертикальное направление письма, Block Direction горизонтально. Соответствующее Inline Direction отвечает за направление отображения строковых элементов (таких как предложение).

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

    Методы CSS, которыми вы можете управлять разметкой элементов:

    • Свойство display — Стандартные значения block , inline или inline-block могут изменять поведение элементов в обычном потоке (см.подробнее Types of CSS boxes). Также можно менять сами методы разметки такими значениями свойства display , как CSS Grid или Flexbox.
    • Floats — Применение значения float типа left может заставить элемент блочного типа «прилепить» содержимое к одной стороне элемента, как иногда изображения обволакиваются текстом на газетных страницах.
    • Свойство position — Позволяет точно контролировать положение блоков внутри других блоков. static позиционирование является стандартным, но также можно применять другие значения свойства, например фиксированное в углу экрана.
    • Макет Таблицы — свойства для разметки таблиц могут быть использованы и для нетабличных элементов, с помощью display: table и соответствующих свойств.
    • Multi-column layout — Многоколоночный макет (en-US) поможет расположить содержимое столбцами, как в газетах.

    Свойство display

    Значения свойства display являются главными методами вёрстки разметки страницы в CSS. Это свойство позволяет нам менять то, как что-то отображается по умолчанию. Каждый элемент по умолчанию имеет свойство display , влияющее на то, как этот элемент отображается. Например, параграфы на английском располагаются один под другим только потому что они имеют по умолчанию свойство display: block . Если же вы создадите ссылку внутри параграфа, эта ссылка будет отображаться в общем потоке с остальным текстом, без переноса на новую строку. Это потому что у элемента по умолчанию установлено свойство display: inline .

    В дополнение к возможности менять значение с block на inline и обратно, есть и другие возможности вёрстки с другими значениями display . Однако, в основном все они требуют использования дополнительных свойств. Двумя наиболее важными для задач вёрстки страниц являются display: flex и display: grid .

    Flexbox

    Flexbox (сокращение от Flexible Box Layout) это модуль, разработанный для облегчения вёрстки в одном из измерений — как ряд или как колонка. Для использования, установите свойство display: flex для родительского элемента тех элементов, к которым хотите применить этот тип вёрстки; все его прямые потомки станут flex элементами. Рассмотрим это на простом примере.

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

    Но если мы добавим свойство display: flex родительскому элементу, три дочерних сгруппируются в колонки. Всё это потому что они сами становятся элементами flex и наследуют некоторые свойства, установленные контейнеру, в котором они находятся. Они выстраиваются в строку, потому что начальное значение flex-direction это row . Высота становится равной высоте самого высокого элемента, потому что начальное значение align-items установлено как stretch . Это значит, элементы вытягиваются по высоте контейнера, который в этом случае сам принимает высоту самого высокого элемента. Все они группируются в начале контейнера, оставляя пустое пространство в конце строки.

    *  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 
    .wrapper  display: flex; > 
    div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

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

    В качестве простого примера, добавим свойство flex ко всем дочерним элементам, со значением 1 . Это заставит все элементы растянуться и заполнить контейнер, не оставляя свободного места в конце строки. Если освободится дополнительное пространство, элементы растянутся; если доступное место убавится — элементы сожмутся. Также, если вы добавите дополнительный элемент, остальные элементы станут меньше, для того, чтобы все они были одного размера.

    *  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 
    .wrapper  display: flex; > .wrapper > div  flex: 1; > 
    div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

    Примечание: Это было очень краткое введение в то что возможно во Flexbox, чтобы узнать больше см. нашу статью Flexbox.

    Grid Layout

    В то время как flexbox предназначен для одномерной разметки, Grid Layout предназначен для двумерной — выстраивая предметы в ряды и столбцы.

    Ещё раз, вы можете переключиться на Grid Layout при помощи конкретного значения отображения — display: grid . Пример ниже использует разметку подобную примеру flex, а также мы определяем некоторые дорожки рядов и столбцов в родительском элементе, используя свойства grid-template-rows и grid-template-columns соответственно. Мы определили три столбца каждый по 1fr и два ряда по 100px . Мне не надо вводить какие-либо правила для дочерних элементов; они автоматически помещаются в ячейки, созданные нашей сеткой.

    *  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 
    .wrapper  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; > 
    div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div class="box4">Fourdiv> div class="box5">Fivediv> div class="box6">Sixdiv> div> 

    Когда у вас есть сетка (grid), мы можете точно размещать на ней свои элементы, а не полагаться на поведение авто-размещения, отмеченного выше. Ниже во втором примере мы задали ту же сетку, но в этот раз с тремя дочерними элементами. Мы задали начало и конец линии каждого элемента используя свойства grid-column и grid-row (en-US). Это заставляет элементы охватывать несколько дорожек.

    *  box-sizing: border-box; > .wrapper > div  border-radius: 5px; background-color: rgb(207, 232, 220); padding: 1em; > 
    .wrapper  display: grid; grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 100px 100px; grid-gap: 10px; > .box1  grid-column: 2 / 4; grid-row: 1; > .box2  grid-column: 1; grid-row: 1 / 3; > .box3  grid-row: 2; grid-column: 3; > 
    div class="wrapper"> div class="box1">Onediv> div class="box2">Twodiv> div class="box3">Threediv> div> 

    Примечание: Эти два примера всего лишь малая часть мощности Grid layout; чтобы узнать больше см. нашу статью Grid Layout.

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

    Floats

    Делая элемент плавающим (float) мы меняем поведение этого элемента и элементов блочного уровня, следующих за ним в нормальном потоке. Элемент перемещается влево или вправо и удаляется из нормального потока (normal flow), а окружающий контент обтекает плавающий элемент.

    Свойство float имеет четыре возможных значения:

    • left — Элемент выравнивается слева и другие элементы обтекают его справа.
    • right — Элемент выравнивается справа и другие элементы обтекают его слева.
    • none — Не задаёт float совсем. Это значение по умолчанию.
    • inherit — Определяет, что значение свойства float должно быть унаследовано от родительского элемента.

    В примере ниже мы задаём элементу float — left и даём margin с правой стороны чтобы отталкивать текст от этого элемента. Это даёт нам эффект того, что текст оборачивает этот блок и является большей частью того, что вам нужно знать о float, используемых в современном веб-дизайне.

    body  width: 90%; max-width: 900px; margin: 0 auto; > p  line-height: 2; word-spacing: 0.1rem; > .box  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; border-radius: 5px; > 
    h1>Simple float exampleh1> div class="box">Floatdiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 
    .box  float: left; width: 150px; height: 150px; margin-right: 30px; > 

    Примечание: Float полностью объяснён в нашем уроке по свойствам float и clear. До таких методов как Flexbox и Grid Layout, float использовался как метод создания макетов колонок. Вы все ещё можете встретить эти методы в интернете; мы рассмотрим их в уроке по устаревшим методам разметки (en-US) .

    Методы позиционирования

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

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

    Существует пять типов позиционирования о которых вам следует знать:

    • Static positioning (статическое позиционирование) — умолчание, которое получают все элементы — это всё лишь значит «поместить элемент в его нормальную позицию в разметке документа — тут нет ничего особенного на что посмотреть».
    • Relative positioning (относительное позиционирование) позволяет вам менять положение элемента на странице, перемещая его относительно его положения в нормальном потоке — в том числе заставляя его перекрывать другие элементы на странице.
    • Absolute positioning (абсолютное позиционирование) полностью перемещает элемент из нормального потока разметки страницы так будто он находится на своём собственном отдельном слое. Оттуда вы можете исправлять его положение относительно краёв элемента страницы (или его ближайшего позиционированного элемента предка). Это является полезным при создании сложных эффектов разметки такие как вкладки, в которых различные панели содержимого располагаются друг над другом и отображаются и/или скрываются по желанию или информационные панели, которые располагаются на экране по умолчанию, но могут скользить по экрану используя кнопки управления.
    • Fixed positioning (фиксированное позиционирование) очень похоже на абсолютное за исключением того, что он изменяет положение относительно окна просмотра браузера, а не другого элемента. Это полезно при создании эффектов таких как постоянное меню навигации, которое всегда остаётся в одном и том же месте на экране, в то время как другой контент прокручивается.
    • Sticky positioning (липкое позиционирование) это новый метод позиционирования, который заставляет элемент вести себя как position: static пока не достигнет определённой линии окна просмотра и с этого момента будет вести себя как position: fixed .

    Пример простого позиционирования

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

    h1>Positioningh1> p>I am a basic block level element.p> p class="positioned">I am a basic block level element.p> p>I am a basic block level element.p> 

    Этот HTML по умолчанию будет стилизован, используя следующий CSS:

    body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 

    Результат выглядит следующим образом:

    Relative positioning

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

    .positioned  position: relative; top: 30px; left: 30px; > 

    Здесь мы даём нашему среднему параграфу position со значением relative — сам по себе он ничего не делает, поэтому мы также добавляем свойства top и left (en-US). Они служат для перемещения задействованного элемента вниз и вправо — что может выглядеть как противоположность тому, чего вы ожидаете, но вам надо думать об этом так будто элемент отталкивается от левого или верхнего края, и в результате он перемещается вправо и вниз.

    Добавление этого кода даст следующий результат:

    h1>Relative positioningh1> p>I am a basic block level element.p> p class="positioned">This is my relatively positioned element.p> p>I am a basic block level element.p> 
    body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 
    .positioned  position: relative; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; > 

    Absolute positioning

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

    Возвращаясь к нашему примеру без позиционирования, мы можем добавить следующее CSS-правило, чтобы реализовать абсолютное позиционирование:

    .positioned  position: absolute; top: 30px; left: 30px; > 

    Здесь мы даём нашему среднему параграфу position со значением absolute , и все те же свойства top и left (en-US) как ранее. Однако, добавление этого кода даст следующий результат:

    h1>Absolute positioningh1> p>I am a basic block level element.p> p class="positioned">This is my absolutely positioned element.p> p>I am a basic block level element.p> 
    body  width: 500px; margin: 0 auto; > p  background-color: rgb(207, 232, 220); border: 2px solid rgb(79, 185, 227); padding: 10px; margin: 10px; border-radius: 5px; > 
    .positioned  position: absolute; background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); top: 30px; left: 30px; > 

    Это совсем другое! Позиционированный элемент теперь совершенно отделен от разметки остальной страницы и располагается поверх него. Другие два параграфа теперь располагаются вместе так будто бы их позиционированный брат не существует. Свойства top и left (en-US) имеют иной эффект на абсолютно позиционированные элементы, чем на относительно позиционированные элементы. В данном случае смещения были рассчитаны сверху и слева от страницы. Возможно изменить родительский элемент так что он становится контейнером, но мы рассмотрим это в уроке по позиционированию.

    Fixed positioning

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

    Для этого примера наш HTML это три параграфа текста для того, чтобы мы могли прокручивать страницу и блок, которому мы дадим position: fixed .

    h1>Fixed positioningh1> div class="positioned">Fixeddiv> p>Paragraph 1.p> p>Paragraph 2.p> p>Paragraph 3.p> 
    h1>Fixed positioningh1> div class="positioned">Fixeddiv> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 
    body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 
    .positioned  position: fixed; top: 30px; left: 30px; > 

    Sticky positioning

    Липкое (Sticky) позиционирование — это последний тип позиционирования которой мы имеем в нашем распоряжении. Это микс дефолтного статического позиционирования с фиксированным позиционированием. когда элемент имеет position: sticky он будет прокручиваться в нормальном потоке пока не достигнет границы окна просмотра которую мы задали. С этого момента он (элемент) «прилипает», как если бы был применён position: fixed .

    h1>Sticky positioningh1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> div class="positioned">Stickydiv> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> 
    body  width: 500px; margin: 0 auto; > .positioned  background: rgba(255, 84, 104, 0.3); border: 2px solid rgb(255, 84, 104); padding: 10px; margin: 10px; border-radius: 5px; > 
    .positioned  position: sticky; top: 30px; left: 30px; > 

    Примечание: чтобы узнать больше о позиционировании, см. нашу статью Позиционирование.

    Макет таблицы

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

    То, как таблица выглядит на веб-странице при использовании разметки таблицы, обусловлено набором свойств CSS, которые определяют макет таблицы. Эти свойства могут использоваться для размещения элементов, которые не являются таблицами, использование, которое иногда описывается как «использование CSS таблиц».

    Пример ниже показывает одно такое использование; использование CSS таблиц для вёрстки должно считаться устаревшим методом на данный момент, для тех ситуаций, когда у вас старые браузеры без поддержки Flexbox или Grid.

    Давайте взглянем на пример. Во-первых, немного простой разметки, которая создаёт HTML форму. Каждый input элемент имеет label, и мы также заключили описание в параграф. каждая пара label/input обёрнута в , для целей вёрстки.

    form> p>First of all, tell us your name and age.p> div> label for="fname">First name:label> input type="text" id="fname" /> div> div> label for="lname">Last name:label> input type="text" id="lname" /> div> div> label for="age">Age:label> input type="text" id="age" /> div> form> 
    html  font-family: sans-serif; > form  display: table; margin: 0 auto; > form div  display: table-row; > form label, form input  display: table-cell; margin-bottom: 10px; > form label  width: 200px; padding-right: 5%; text-align: right; > form input  width: 300px; > form p  display: table-caption; caption-side: bottom; width: 300px; color: #999; font-style: italic; > 

    Это даёт нам следующий результат:

    Также вы можете посмотреть этот живой пример на css-tables-example.html (смотрите также исходный код.)

    Многоколоночный макет

    Модуль многоколоночного макета (multi-column layout) даёт нам способ располагать контент в столбцах, подобно тому, как текст располагается в газете. Хоть и чтение столбцов вверх и вниз менее полезно в контексте веба, так как вы не хотите заставлять пользователей прокручивать вверх и вниз, размещение контента по столбцам может быть полезной техникой.

    Чтобы превратить блок в многоколоночный контейнер мы используем свойство column-count , которое говорит браузеру сколько колонок мы хотим иметь, либо свойство column-width (en-US), которое говорит браузеру заполнить контейнер как можно большим количеством столбцов, по крайней мере, такой ширины.

    В примере ниже мы начинаем с HTML блоком, который содержится в элементе с классом container .

    div class="container"> h1>Multi-column layouth1> p>Paragraph 1.p> p>Paragraph 2.p> div> 

    Мы используем column-width 200 px для этого контейнера, заставляя браузер создавать столько 200 пиксельных столбцов, сколько уместится в этом контейнере и затем разделить оставшееся пространство между созданными столбцами.

    div class="container"> h1>Multi-column Layouth1> p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien. p> p> Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. p> div> 
    body  max-width: 800px; margin: 0 auto; > 
    .container  column-width: 200px; > 

    Создание сайта: HTML, CSS, JS и другие необходимые технологии

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

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

    Создание сайта: HTML, CSS, JS и другие необходимые технологии

    «Фронт» и «бэк»

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

    Фронтенд

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

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

    Бэкенд

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

    Типичная задача бэкенда – регистрация новых пользователей. Программная часть принимает введенные данные, проверяет их правильность (например, чтобы в поле email был введен именно адрес электронной почты, а не простой текст), сохраняет запись пользователя в базу данных и сразу отправляет письмо с введенными логином и паролем на введенный email. При этом все, что видит пользователь – это несколько полей и единственная кнопка: «Зарегистрироваться».

    Наиболее типичными технологиями здесь можно считать:

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

    На самом деле, стек технологий, использующихся бэкенд-разработчиками гораздо больше и сложнее, такового у фронтенда – это и множество языков программирования (Ruby, Python, C# и других), и фреймфорки/библиотеки (Node.js, Django, ASP.NET, Yii) и огромное количество их сочетаний в соответствии с используемыми методологиями.

    Более того, со всем этим связано еще, как минимум, две сложности:

    Создание сайта: HTML, CSS, JS и другие необходимые технологии

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

    Неужели все настолько сложно?

    Ответ на этот вопрос зависит от того, с какой точки зрения на него посмотреть.

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

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *