<MyRusakov.ru />

Создание Интернет-магазина на OpenCart 2.0

Создание Интернет-магазина на OpenCart 2.0

Видеокурс "Создание Интернет-магазина на OpenCart 2.0" обучит Вас созданию любых Интернет-магазинов на OpenCart 2. В первом разделе курса разбираются абсолютно все возможности данного движка с примерами.

Во втором разделе создаётся полноценный Интернет-магазин, где Вы уже всё увидите своими глазами.

И, наконец, в третьем разделе курса созданный Интернет-магазин будет размещён в Интернете.

К курсу так же идут бесплатные и очень ценные Бонусы сопоставимые с самим курсом: "Как сэкономить на Яндекс.Директ до 50%", "Дропшиппинг" и "Как раскрутить Интернет-магазин".

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

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

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

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

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

Каким движком Вы предпочитаете пользоваться?

Выравнивание элементов в HTML

Выравнивание элементов в HTML

До сих пор мы с Вами выравнивали элементы только по левому краю. Точнее, мы с Вами вообще этим не занимались, а сам браузер по умолчанию выравнивает элементы по левому краю. Разумеется, было бы слишком скучно выравнивать всё по левому краю. Поэтому существуют различные способы выравнивания по центру и по правому краю.

Выравнивание элементов - это самые основы HTML, которые просто необходимо знать при создании интернет сайтов. Первое, что необходимо сделать - это набрать HTML-код простейшей страницы.

Ещё когда-то давно появился тег <center> я сейчас Вам не советую его применять, ввиду наличия более современных способов, но не упомянуть я о нём не могу. Использовать его очень и очень просто. Всё, что Вам необходимо выравнять по центру, Вы помещаете внутри этого тега. Вот, например, тут мы выравниваем заголовок 1-го уровня по центру.

<center>
  <h1>Заголовок 1-го уровня, выравненный по центру</h1>
</center>

Можно добавить картинку, выравненную также по центру, также давайте перейдём на следующую строку с помощью тега <br>:

<center>
  <h1>Заголовок 1-го уровня, выравненный по центру</h1>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>

Это был тег <center>, который уже устарел, вдобавок, вопреки Вашим ожиданиям тегов <left> и <right> просто не существует. Допустим, по левому краю выравнивается по умолчанию, по центру выравнивается с помощью тега <center>, но как же быть с правым?

Чтобы решить эту проблему разработчики придумали универсальный способ выравнивания элементов HTML. Способ заключается в использовании так называемых контейнеров, которые создаются с помощью тега <div>. То есть всё, что необходимо поместить в определённый контейнер помещается внутри тега <div>. А уже у этого тега есть атрибут "align", значение которого и определяет положение данного контейнера. Бывают три значения: "left", "center", "right". По умолчанию, стоит "left", впрочем, думаю, что Вас это не удивляет.

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

<div align = "right">
  <h1>Заголовок 1-го уровня, выравненный по правому краю</h1>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>

Как видите, всё работает. Советую Вам также поменять значения атрибута "align", чтобы посмотреть на другие виды выравнивания содержимого контейнеров.

Другой способ выравнивания элементов HTML - это таблицы, но эта тема заслуживает отдельного разговора, поэтому поговорим о ней в одной из следующих статей.

А пока Ваша страница должна выглядеть так:

<html>
<head>
</head>
<body>
<center>
  <h1>Заголовок 1-го уровня, выравненный по центру</h1>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</center>
<div align = "right">
  <h1>Заголовок 1-го уровня, выравненный по правому краю</h1>
  <br>
  <img src = "Водяные лилии.jpg" width = "150" height = "150">
</div>
</body>
</html>

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Woozoor™ Woozoor™ 06.05.2011 09:29:19

А как задать определенные координаты объекту?

Ответить

Admin Admin 06.05.2011 12:13:55

Это можно сделать только через CSS.

Ответить

Woozoor™ Woozoor™ 06.05.2011 19:59:42

Спасибо за ответ, Михаил. Мне до этого еще далеко!)) И спасибо за сайт, действительно доступным языком написано.

Ответить

sergeevna sergeevna 14.11.2012 15:03:55

А как в css прописывается выравнивание картинки по центру?

Ответить

Admin Admin 14.11.2012 15:08:13

text-align: center;

Ответить

sergeevna sergeevna 14.11.2012 15:22:00

Что не так? body { margin-top: 50px; padding: 0; background: #787878; text-align: justify; font-family: Verdana, Georgia, Times, serif; font-size: 14px; color: #616161; img text-align: center; }

Ответить

Admin Admin 14.11.2012 15:34:54

Не так синтаксис CSS: http://myrusakov.ru/sintaksis-css.html Также не к img надо свойство text-align применять, а к родительскому контейнеру.

Ответить

arguha arguha 16.12.2012 01:07:33

Михаил подскажите при переносе вправо цифры списка остались слева <div align = "right"> <ol> <li><h1>проба</h1></li> <li><h1>проба</h1></li> </ol> </div>

Ответить

Admin Admin 16.12.2012 10:29:29

ol - это блочный элемент, его надо через CSS переносить, например, через float.

Ответить

Adrenalin Adrenalin 15.04.2013 21:01:25

Как создать два овала (или круга) и поместить в них текст, ссылки и т.д.? Что то вроди таблиц с закруглёнными краями, но мне нужно что-то на подобии яиц. Это возможно? Как?

Ответить

Admin Admin 15.04.2013 22:25:51

http://myrusakov.ru/css-round-angle.html

Ответить

Rustam32 Rustam32 15.06.2013 20:27:03

Доброго времени суток, Михал. Скажите, как быть в случае, если требуется выровнять список, например, по правому краю? Я думал что это должно работать таким образом: <div align = "right"> <ul> <li>Во-первых,... <li>Во-вторых,... </ul> </div> Но в данном случае "кружки" остаются в левой стороне, а по правому краю выравнивается только текст. Как добиться того, что бы и метки("кружочки") выравнивались вместе с текстом? Спасибо.

Ответить

Admin Admin 15.06.2013 21:41:13

ul {float: right;} - попробуйте поставить.

Ответить

Rustam32 Rustam32 15.06.2013 22:19:32

Я правильно понимаю, что это CSS?

Ответить

Admin Admin 16.06.2013 11:12:27

Да.

Ответить

igor2992 igor2992 21.08.2015 13:39:16

Михаил,подскажите пожалуйста,что делать если кириллицу на самом сайте он показывает непонятными символами,а с английскими в исходном коде всё нормально

Ответить

Dave Dave 02.10.2016 20:15:26

вставь этот код в head:<meta http-equiv="content-Type" content="text/html; charset=utf-8">

Ответить

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