HTML и CSS для начинающих — Вводная статья

html cssПриветствуем всех начинающих веб-разработчиков. Эта статья будет исключительно вводной и создана для понимания основ программирования веб-страниц с помощью html и css. Надеюсь она будет полезной для вас. В рамках этой темы будет выпущено несколько статей. Ранее уже говорилось о связке html и css. В статье мы будем проводить аналогии на простых вещах, которые встречаются в повседневной жизни. Такой подход позволит максимально просто понять информацию. Давайте начнем.

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

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

В свою очередь css — это каскадные таблицы стилей. Они относятся к веб-дизайну. Цвета, фон, рамки, отступы, формат текста, шрифты текста и многое другое.

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

Все элементы на html странице для наиболее простого восприятия можно назвать объектами. Но на самом деле это все — блоки, абзацы, таблицы, сетки, заголовки, ссылки, гиперссылки, кнопки и т.д. Сам по себе html умеет объявлять эти объекты, но не умеет редактировать их свойства. Для этого как раз был создан css.

HTML и CSS для начинающих: Пример #1

Рассмотрим простой пример, чтобы понять логику:

Объект: Кнопка(html)

С помощью html мы можем расположить тег button в любом месте документа, но не сможем отредактировать цвет кнопки, или ее шрифт ведь все это относится к свойствам объекта. CSS не умеет напрямую в самом html документе менять расположение кнопки, но может управлять ее расположением на странице, которую рендерит браузер. Отступы кнопки это свйоство. Проведем аналогию в реальной жизни:

У вас есть белая коробка. Коробка это объект. Вам не нравится, что коробка стоит ровно у стены, потому что между стеной и коробкой должно быть расстояние в 1 метр, например. Вы берете и переставляете ее. Со стороны html и css это можно объяснить так: вы не поменяли объект в комнате и оставили его на полу, но вы поменяли его расположение в комнате.

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

Страница:

  • Button(простой html)
  • Button.padding(свойство css)

Комната:

  • Коробка(простой html)
  • Коробка.отступ(свойство css)

HTML и CSS для начинающих: Пример #2

Теперь смоделируем более сложную ситуацию. У любого блока на странице есть форматирование. Оно состоит из свойств, которые упоминались ранее (шрифт, наклон текста, цвет текста, фон блока, тени и т.д.). Как же работать с каждым из свойств отдельно? Так и работать — отдельно, каждый элемент страницы имеет свой уникальный идентификатор или класс. Как это понять? Проведем аналогию:

Объект 1: большая белая коробка (простой html)
Объект 2: маленькая белая коробка (простой html)

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

Соответственно работая с классом коробка, при настройке свойств для них обеих сразу это будет выглядеть в css так:

.коробка {
отступ: 1 метр
цвет: зеленый
}

Но если вы решите, что такой подход вас не устраивает, то в css вы можете настроить и большую и маленькую коробку по отдельности:

.большая-коробка {
цвет: фиолетовый
отступ: 3 метра
}

.маленькая-коробка {
цвет: желтый
отступ: 1 метр
}

Что интересно, если вы занесете в комнату новую коробку с классом .маленькая-коробка она автоматически получит все те же самые свойства. С большой коробкой то же самое.

Немного кода, по аналогии с примерами коробок в комнате:

HTML:

CSS:

HTML создает и располагает элементы на странице. CSS редактирует их свойства.

Итог

Поняв эти простые принципы можно спокойно начинать экспериментировать, создавая свои странички с помощью html и css. В целом html и css для начинающих будет не сложной задачей. В нынешнее время все страницы любого сайта находятся под управлением какой-нибудь системы. Будь то CMS для сайтов, или полноценные React или Node.js. Тем не менее в рамках обучения всегда полезно практиковаться и оттачивать новые навыки или фичи. А если вы до сих пор не знаете как создать свой первый html файл, то вам в эту статью. Надеемся эта статья помогла вам понять принципы работы html и css. Подписывайте на нашу группу в ВК, канал на ютубе, в телеге, а так же на группу в Фейсбуке, чтобы не пропускать новые статьи!

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

Поделиться в соц. сетях:

Понравилась статья? Поблагодари автора, накорми печеньками! :)

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