Основы вёрстки сайтов: язык разметки и структура

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

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

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

<img src=»PRIMER.jpg»>

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

Язык разметки

Профессиональные веб-дизайнеры не используют только HTML-язык для создания страниц на просторах сети. Чтобы более подробно и детально отразить стилистику определенных сайтов, появился язык разметки, позволяющий сделать веб-страницу уникальной, не похожей ни на какую больше. Это и есть второй аспект, именуемый у веб-дизайнеров термином CSS. Расшифровывается он, как «Каскадные таблицы стилей». Благодаря ему мы получили все возможности для придания уникальности оформлению веб-ресурсов и заданиям им собственного стиля.

CSSВеб-дизайнеры в полном объеме используют мощности CSS. Язык вёрстки позволяет пользователю отредактировать текст или какой-то объект по его личным нуждам. Структура написания этого языка несильно отличается от структуры языка разметки. Есть лишь три отличия:

  • название контейнеров;
  • их количество;
  • их оформление.

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

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

Структура CSS-вёрстки

Основа структурирования CSS представляет собой команду из четырёх составляющих. Первой составной частью является обозначение объекта, к которому применяется модификация. Например, начиная описание с решётки (#), мы применим свойство к определенному элементу (только одному). Затем на очереди название этого элемента, который мы хотим редактировать (его ID). Третьим шагом будет открытие фигурных скобок и описание свойства с двоеточием. Последний этап написания команды заключается в указании соответствующего значения. Обратите внимание, что после финального шага должны стоять точка с запятой и закрыты фигурные скобки.

Пример

#primer-text {font-size: 20px; }

Здесь применяется размер текста 20 пикселей для HTML-элемента с ID равному «primer-text». По идее, все должно быть понятно.