<MyRusakov.ru />

WordPress 6 с Нуля до Гуру

WordPress 6 с Нуля до Гуру

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

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

Помимо уроков к курсу идут упражнения для закрепления материала.

И, наконец, к курсу идёт ценнейший Бонус по тому, как используя ChatGPT и создавая контент для сайта, можно выйти на пассивный доход. Вы наглядно увидите, как зарегистрироваться в ChatGPT (в том числе, и если Вы из России), как правильно выбрать тему для сайта, как правильно генерировать статьи для него(чтобы они индексировались поисковыми системами) и как правильно монетизировать трафик на сайте.

Подробнее
Подписка

Подпишитесь на мой канал на YouTube, где я регулярно публикую новые видео.

YouTube Подписаться

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Какая тема Вас интересует больше?

Ошибки новичков при верстке сайтов #1

Ошибки новичков при верстке сайтов #1

Несоблюдение HTML и CSS правил, приводит к массе ошибок при верстке. Исправить которые, бывает не так просто для начинающих верстальщиков. Сегодня мы рассмотрим самые распространенные ошибки, связанных с понятием строчные и блочные элементы.

В HTML все теги делятся на два типа — блочные и строчные. Рассмотрим на примере тегов div (блочный) и span (строчный) принципиальную разницу между ними. Поместим оба тега в контейнер и для наглядности зададим им рамки. Как видите, тег div занял всю доступную ширину родителя, зато для тег span ограничился шириной, нужной только для самого текста.

// HTML код
<div class="wrapper">
    <div>div</div>
    <span>span</span>
</div>

// CSS код
.wrapper {
    width: 400px;
    height: 150px;
    border: 1px dashed magenta;
}

div {
    border: 1px solid black;
}

span {
    border: 1px solid black;
}

Ошибки новичков при верстки сайтов.

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

<div class="wrapper">
    <div>div</div>
    <div>div</div>
    <span>span</span>
    <span>span</span>
</div>

Ошибки новичков при верстки сайтов.

Какие ошибки допускают начинающие верстальщики при работе со строчными и блочными элементами?


Ошибки при работе со строчными и блочными элементами


1) Ошибка. При попытке выравнивния текста внутри строчных элементов.

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

div {
    text-align: center;
}

span {
    text-align: center;
}

Мы видим, что на блочном теге div это свойство сработало, однако текст внутри строчного тега span никуда не сдвинулся. На самом деле ему и некуда двигаться, поскольку граница проходит строго по тексту. Поэтому выравнивание для строчных элементов не работает.


Ошибки новичков при верстки сайтов.

Как быть, если все-таки при верстке вам нужно для строчных элементов задать размеры и сделать выравнивание? Ведь для семантической верстки нехорошо, когда весь сайт сверстан на дивах. Выход есть, нужно отобразить строчный тег span, как блочный, через свойство display: block. Если тег span станет блочным, то центрирование сработает.

span {
    text-align: center;
    display: block;
}

Ошибки новичков при верстки сайтов.

2) Ошибка. Прописывают text-align строчному тегу.

Очень часто стоит задача отцентрировать текст в блоке div, причем сам текст находится в дочернем теге span. Если прописать свойство text-align строчному тегу, то ничего не произойдет. Поскольку мы пытаемся центрировать текст внутри границ span, которые проходят строго по тексту.

<div>
    <span>span</span>
</div>

// неправильно
div {
    ...
}

span {
    text-align: center;
}

Ошибки новичков при верстки сайтов.

Когда свойство text-align задается родителю, то оно воздействует и на сам span, ставит его по центру.

// правильно
div {
    text-align: center;
}

span {
    ...
}

Ошибки новичков при верстки сайтов.

Что мешает новичку быстро и без ошибок верстать сайты? Любой скажет, что отсутствие практики и будет абсолютно прав. Но есть еще что-то не менее важное - это хорошее знание HTML и CSS правил, а также умение их применять. Как раз этому навыку Вас обучит мой видео-курс "Вёрстка сайта с нуля 2.0"

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.