Основы вёрстки сайтов: язык разметки и структура
Мы живем в век информационных технологий, в котором интернет занимает одно из ключевых мест. Человеку свойственно приукрашивать всё, что его окружает. И огромное информационное веб-пространство не стало исключением из этого правила. Сегодня поговорим про верстку вебсайтов.
По сути, вся глобальная паутина держится условно на двух аспектах. В качестве первого из них можно выделить язык разметки, именуемым у веб-дизайнеров как HTML. Именно эта вещь позволяет наполнять сайт информацией самого разного характера. Абсолютно любой файл можно поместить на страницу в интернете, нужно лишь немного поправить код. Также в HTML вы можете задать выравнивание объекта или текста по определенному краю, определить его цвет.
Структура языка разметки крайне проста и представляет собой группу вложенных блоков. Каждый из таких блоков называется «тег», он размещается внутри знаков <…>. Также между этими символами могут располагаться некоторые другие записи, указывающие параметры и их значения для конкретного тега. Например:
<img src=»PRIMER.jpg»>
Здесь мы добавили картинку на веб-страницу. Если вы не хотите вникать во все эти дебри обращайтесь в компанию Нужен сайт где за вас все сделают, у них весьма неплохое портфолио верстальщика и представлен весь спектр соответствующих услуг.
Язык разметки
Профессиональные веб-дизайнеры не используют только HTML-язык для создания страниц на просторах сети. Чтобы более подробно и детально отразить стилистику определенных сайтов, появился язык разметки, позволяющий сделать веб-страницу уникальной, не похожей ни на какую больше. Это и есть второй аспект, именуемый у веб-дизайнеров термином CSS. Расшифровывается он, как «Каскадные таблицы стилей». Благодаря ему мы получили все возможности для придания уникальности оформлению веб-ресурсов и заданиям им собственного стиля.
Веб-дизайнеры в полном объеме используют мощности CSS. Язык вёрстки позволяет пользователю отредактировать текст или какой-то объект по его личным нуждам. Структура написания этого языка несильно отличается от структуры языка разметки. Есть лишь три отличия:
- название контейнеров;
- их количество;
- их оформление.
Контейнеры называются немного иным образом для поддержания логики в языке.
- Первый элемент — это селектор, в нем располагается основная информация о классе, на который применяется следующий блок.
- Второй же именуется свойством и, как уже можно было понять, он отражает действие, которое будет произведено над объектом.
- Третий пункт — значение свойства.
Структура CSS-вёрстки
Основа структурирования CSS представляет собой команду из четырёх составляющих. Первой составной частью является обозначение объекта, к которому применяется модификация. Например, начиная описание с решётки (#), мы применим свойство к определенному элементу (только одному). Затем на очереди название этого элемента, который мы хотим редактировать (его ID). Третьим шагом будет открытие фигурных скобок и описание свойства с двоеточием. Последний этап написания команды заключается в указании соответствующего значения. Обратите внимание, что после финального шага должны стоять точка с запятой и закрыты фигурные скобки.
Пример
#primer-text {font-size: 20px; }
Здесь применяется размер текста 20 пикселей для HTML-элемента с ID равному «primer-text». По идее, все должно быть понятно.