Приветствуем всех начинающих веб-разработчиков. Эта статья будет исключительно вводной и создана для понимания основ программирования веб-страниц с помощью 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:
|
1 2 |
<div class="big-box">Большая коробка</div> <div class="small-box">Маленькая коробка</div> |
CSS:
|
1 2 3 4 5 6 7 8 9 |
.big-box { color: purple; padding: 3px; } .small-box { color: yellow; padding: 1px; } |
HTML создает и располагает элементы на странице. CSS редактирует их свойства.
Итог
Поняв эти простые принципы можно спокойно начинать экспериментировать, создавая свои странички с помощью html и css. В целом html и css для начинающих будет не сложной задачей. В нынешнее время все страницы любого сайта находятся под управлением какой-нибудь системы. Будь то CMS для сайтов, или полноценные React или Node.js. Тем не менее в рамках обучения всегда полезно практиковаться и оттачивать новые навыки или фичи. А если вы до сих пор не знаете как создать свой первый html файл, то вам в эту статью. Надеемся эта статья помогла вам понять принципы работы html и css. Подписывайте на нашу группу в ВК, канал на ютубе, в телеге, а так же на группу в Фейсбуке, чтобы не пропускать новые статьи!
Если у вас остались вопросы, обязательно пишите их в комментариях. Спасибо за внимание.