<MyRusakov.ru />

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

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

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

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

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

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

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

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

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

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

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

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

HTML-теги для текста

HTML-теги для текста

В сегодняшней статья я Вас познакомлю с различными способами форматирования текста.

Совершенно очевидно, что было бы очень скучно, если бы везде был однообразный текст: одного размера, одного шрифта, одного цвета, одного вида. Поэтому среди HTML тегов имеются различные теги, позволяющие задать определённый внешний вид текста.

Давайте, для начала разберёмся с начальными данными, если можно так выразиться, а именно со страницей, которая у нас имеется. Пусть она будет такой:

<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
  <h1>Заголовок 1-го уровня</h1>
</body>
</html>

Собственно, здесь уже имеются элементы форматирования: тег <h1>, который делает текст внутри тега крупным, более того, это идёт, как заголовок, поэтому дальнейшие элементы располагаются уже под ним. Также мы здесь задали цвет текста (green) в атрибуте text тега <body>.

Теперь поговорим о других возможностях по форматированию текста.

Первое, что можно сделать - это узнать, как сделать различный вид текста: курсив, подчёркнутый, жирный и различные комбинации.

Начнём с курсива. Текст будет курсивным, если он находится внутри тега <i>. Поэтому давайте напишем так:

<i>Это курсив</i>

Если Вы запустите браузер, то Вы сможете увидеть текст в виде курсива.

Также текст может быть жирным. Делается это с помощью тега <b>. Например, так:

<b>Это жирное начертание</b>

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег <u>.

<u>Подчёркнутый текст</u>

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

<i><b>Жирный курсивный текст</b></i>

Также можно записать и так:

<b><i>Жирный курсивный текст</i></b>

Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным. Суть, думаю, понятна. Единственное правило, но ОЧЕНЬ важное правило - это соблюдать принцип вложенности. То есть сначала закрываются все внутренние теги, и только потом закрываются внешние теги. Таким образом, НЕЛЬЗЯ писать так:

<i><b>Жирный курсивный текст</i></b>

Думаю, понятно, что работать это не будет. Ведь мы не закрыли ещё тег <b>, а уже закрываем тег <i>. Всегда помните о принципе вложенности - это одно из немногих правил HTML, соблюдение которого обязательно!

Теперь поговорим о размере шрифта текста. Изменить размер текста можно с помощью тега <font>, а, точнее, с помощью его атрибута "size", значение которого и означает размер шрифта. Давайте перейдём на следующую строку с помощью тега <br> и напишем такую строчку:

<font size = "5">Это текст c size = "5"</font>

Обновив страницу в браузере, Вы увидите, что текст стал крупнее, чем раньше. Это и сделал атрибут "size" тега <font>. Чем больше значение атрибута "size", тем крупнее шрифт, впрочем, думаю, что Вам это очевидно.

Цвет текста можно задавать также с помощью тега <font>, так как у этого тега имеется ещё один атрибут - "color". Значение данного атрибута может быть любой цвет. Давайте напишем так:

<font size = "5" color = "red">Это увеличенный красный текст</font>

Вот это и были основные способы по изменению внешнего вида текста.

Напоследок, напишем строчку, в которой намешано абсолютно всё, что мы сегодня узнали. Сначала, правда, давайте перейдём на следующую строку, с помощью уже знакомого нам тега <br>. Обратите внимание, что необходимо соблюдать принцип вложенности: пока не закрыт внутренний тег - внешний не закрывается.

<font size = "4" color = "navy">
  <b>
    <i>
      <u>Это текст, в котором намешано очень многое</u>
    </i>
  </b>
</font>

Таким образом, код нашей страницы стал таким:

<html>
<head>
</head>
<body text = "green" bgcolor = "yellow">
  <h1>Заголовок 1-го уровня</h1>
  <i>Это курсив</i>
  <b>Это жирное начертание</b>
  <u>Подчёркнутый текст</u>
  <i>
    <b>Жирный курсивный текст</b>
  </i>
  <b>
    <i>Жирный курсивный текст</i>
  </b>
  <br>
    <font size = "5">Это текст c size = "5"</font>
    <font size = "5" color = "red">Это увеличенный красный текст</font>
  <br>
  <font size = "4" color = "navy">
    <b>
      <i>
        <u>Это текст, в котором намешано очень многое</u>
      </i>
    </b>
  </font>
</body>
</html>

Вот и вся наука. Как видите, снова ничего сложного не было, и это неудивительно, ведь это основные знания по HTML, которыми обладает любой уважающий себя Web-мастер. Без этих знаний речи о создании сайтов и идти даже не может.

Всего Вам доброго, увидимся в следующей статье.

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

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

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

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

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

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

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

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

  1. Кнопка:

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

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

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

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

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

Гость Гость 18.02.2011 21:41:34

Очень крутой сайт! Большое спасибо. P.S. заметил небольшую описку: "Также можно записать и так: <b><i>Жирный курсивный текст</b></i>" по-видимому имелось в виду: "<b><i>Жирный курсивный текст</i></b>" так как теги обязаны быть вложенными

Ответить

Гость Гость 18.02.2011 21:43:15

Ой :) я имел виду: "Также можно записать и так: <b.><i.>Жирный курсивный текст</b.></i.>" по-видимому имелось в виду: "<b.><i.>Жирный курсивный текст</i.></b.>" только без точек разумеется.

Ответить

Admin Admin 19.02.2011 00:39:11

Спасибо большое, не заметил!

Ответить

Alim_(I) Alim_(I) 06.05.2011 19:44:24

Можете дать ссылку на статью, в которой цвет ссылки мы меняли?

Ответить

Admin Admin 06.05.2011 19:46:27

http://myrusakov.ru/ssylki-izobrageniya-html.html

Ответить

Виталий Виталий 20.01.2012 17:03:10

Привет Михаил такой вопрос прописываю <html> <head> </head> <body text = "red" bgcolor = "yellow" > <h1>Ну ни х...</h1> <i>Это курсив мать его</i> <br> <b>А это с... жирный шрифт</b> <br> <u>Подчеркнутый <i>c курсивом</i> и <b>жирным с..</b> текст</u> <br> <front size = "5">Это текст с size="5"</front> <br> <front size = "8" color= "white"> <i>Это увеличенный белый текст написанный курсивом)))</i> </front> </body> </html> не изменяется в последних тегах size и color почему?

Ответить

Admin Admin 20.01.2012 18:11:51

Ненормативная лексика на данном сайте запрещена! Что касается вопроса, то ничего не увеличивается, поскольку тег называется <font>, а не <front>.

Ответить

Виталий Виталий 21.01.2012 12:07:22

Спасибо на счет лексики извини не повторится

Ответить

Tao Tao 13.04.2012 17:15:44

Для тега font есть еще атрибут face, какие у него есть значения? Или об этом где то дальше написано

Ответить

Admin Admin 13.04.2012 17:42:28

Тег <font> теперь лучше не использовать. Все стили задавать надо через CSS.

Ответить

menshikov-vlad menshikov-vlad 31.08.2012 17:07:56

Спасибо большое за сайт я лучше не видел.

Ответить

lilidana-00 lilidana-00 21.02.2013 13:23:19

Я вроде все сделала правильно, но когда я захожу на index.html то там что то вроде закорючек. <html> <head> </head> <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> </body> </html> Скажите что я сделала неправильно?

Ответить

Admin Admin 21.02.2013 21:16:56

http://myrusakov.ru/php-encoding-problems.html

Ответить

Slavik Slavik 02.02.2014 16:24:59

надо в теге <head> писать <meta http-equiv="Content-type" content="text/html; charset=windows-1251"/> если не помогает, пропишите utf-8 вместо windows-1251.

Ответить

zhigajloe@mail.ru zhigajloe@mail.ru 30.06.2013 09:13:01

Спасибо за статью! Жигайло

Ответить

pavell pavell 12.07.2013 00:16:09

ка на xhtml валидно сделать зелёный текст ни font ни атрибут text он не поддерживает а как без них даже не могу class задать тексту чтоб через css какой селектор в css за обычный текст отвечает?

Ответить

Admin Admin 12.07.2013 10:28:27

Цвет задаётся через свойство color в CSS.

Ответить

pavell pavell 12.07.2013 12:17:12

Не так это я знаю. Но как для обычного текста селектор задать??, если он не в теге а простой обычный текст.

Ответить

Admin Admin 12.07.2013 14:43:11

Выделить этот текст тегом, например, span.

Ответить

Веселый Дрозд Веселый Дрозд 15.08.2013 18:34:28

попробуй селектор по id. Его можно пихнут к чему угодно. Как это сделать, я тут писать не буду, без обид.

Ответить

pavell pavell 12.07.2013 15:39:14

Спасибо а нет селектора отвечающего за весь текст на странице? Если надо весь текст на странице сделать зелёным например. А в span нельзя других тегов использовать закрывать надо постоянно и код большой будет. Если б можно сделать чтоб на всей странице текст цветной. (атрибут text в боди не подходит)

Ответить

Admin Admin 12.07.2013 15:46:59

body {color: #f00;}

Ответить

pavell pavell 12.07.2013 15:59:53

Спасибо большое !

Ответить

Sosed Sosed 21.08.2013 03:20:37

Привет Михаил, у меня вопрос, если хорошо изучать твои уроки про HTML,CSS и PHP можно зарабатывать свои первые деньги(небольшие конечно) фрееланцерах например, или работать в коком то фирме для начала?или это только основы и более много надо изучать что бы начинать зарабатывать с этим?несколько дней уже читаю твои уроки и очень ясно всё здесь написано,очень удобно здесь изучать. Заранее спасибо.

Ответить

Admin Admin 21.08.2013 19:48:05

Да, вполне можно. А где именно, это уже как Вам удобнее.

Ответить

Konzert Konzert 24.08.2013 18:52:07

Здравствуйте, Михаил. А как вы думаете, каковы шансы 16-ти летнего подростка реализоваться в подобной сфере электронной коммерции?(т.е. создание собственного сайта, размещение рекламы и так далее) или просто ЗАРАБОТАТЬ В ИНТЕРНЕТЕ? Надо ли, если ты(я) будучи отличник и тебе сулит хорошее образование, а значит оплачиваемая профессия в будущем, идти на встречу всему этому? Возможно ли параллельно с учебой,да блин, то там,забегу на перед, с будущей работой осуществить планы в сети интернет? Мне будет ОЧЕНЬ познавательно-ценно ваше мнение.

Ответить

Admin Admin 25.08.2013 20:15:12

Я так и начинал, обучаясь самостоятельно, параллельно с учебой. Так что все в Ваших руках.

Ответить

maga.ganatov@mail.ru maga.ganatov@mail.ru 22.01.2014 22:32:23

подскажите пожалуйста ка изменить текст в XHTML

Ответить

serjikkk serjikkk 25.11.2013 20:07:09

Михаил а еще надо кое-где добавить <br> ну можно так, можно и вот так <br />. Это уже от кого как зависит. А то почти вся писанина сливаются в одну строку. И еще я думаю что после каждого этасамого нужно ставить br чтобы след. был по новой

Ответить

serjikkk serjikkk 26.11.2013 22:37:51

Ну я так понял. Что если хочешь строить сайты то нужно не повторять эти "сайтостройки" а нужно пытаться какие-нибудь сайты повторять. В каком нибудь блокноте. И если что-то не получается то перерыть весь интернет но ответ таки найти. Или спросить у Михаила

Ответить

sub1985 sub1985 03.12.2013 20:31:44

Михаил привет. Прописываю <html> <head> <title>Наша страница</title> <meta http-equiv="Content-type" content="text/html; charset=windows-1251"> </head> <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> <i>Это курсив</i> <b>Это жирное начертание</b> <u>Подчеркнутый текст</u> <i> <b>Жирный курсив</b> </i> <b> <i>Жирный курсив</i> </b> <front size = "5" > это текст с size = "5"</front> <front size = "5" color = "red"> Это увиличенный красный цвет</front> <br> <front size = "4" color = "navy"> <b> <i> <u>Это текст в котором смешано очень многое</u> </i> </b> </front> </body> </html> Цвета прописаны, но все происходит по плану, кроме изменения цвета,остается весь зеленый. В чем проблемка??

Ответить

tikkiwiki tikkiwiki 04.12.2013 10:43:02

Внимательнее вложенность проверьте.

Ответить

Slavik Slavik 02.02.2014 19:50:59

тег называется не <front>, а <font>

Ответить

Nyasha Nyasha 02.06.2014 23:13:56

Доброго времени суток!)Я все прочитала и сделала по инструкции,но когда открыла получившееся в браузере,то увидела не то чего ожидала,т.е. вместо русских букв там текст вот такоей:Это РєСѓСЂСЃРёРІ Это жирное. Помогите пожалуйста ^^"

Ответить

tikkiwiki tikkiwiki 04.06.2014 10:00:35

Проблема у Вас с кодировкой, используйте UTF-8.

Ответить

Дмитрий Тормосин Дмитрий Тормосин 08.07.2014 18:33:35

Подскажите, где можно увидеть самый полный список тегов и их атрибутов со спецификацией

Ответить

951753 951753 24.07.2014 10:46:34

Дмитрий, посмотрите здесь: puzzleweb.ru (HTML 5), html-css-reference.ru (HTML и CSS), website.mirlive.com, supersanja.narod.ru. Удачи!

Ответить

tikkiwiki tikkiwiki 28.07.2014 09:27:32

htmlbook.ru

Ответить

malinka-best malinka-best 16.12.2014 23:09:12

Помогите пожалуйста! Как мне записать, чтоб слова "блог" и "Романа Малинина" в строках: <div id="logo"> <cite style="font-size:40px;">блог</cite><br /> <cite style="font-size:80px;">Романа Малинина</cite><br /> </div> были другого цвета, шрифта (например: times new roman) и чтоб код конечно был валидным... :-) ))) Весь код: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Личный блог Романа Малинина</title> <meta name="keywords" content="роман малинин, блог роман малинин, рассылка роман малинин" /> <meta name="description" content="Личный блог Романа Малинина и его выпуски рассылки." /> <link href="styles.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="content"> <div id="back_all"> <!-- header begins --> <div id="header"> <div id="logo"> <cite style="font-size:40px;">блог</cite><br /> <cite style="font-size:80px;">Романа Малинина</cite><br /> </div> <div id="menu"> <ul> <li><a href="#" title="">Главная</a></li> <li><a href="#" title="">Реклама</a></li> <li><a href="#" title="">Видео</a></li> <li><a href="#" title="">Новости</a></li> <li><a href="#" title="">Контакты</a></li> <li><a href="#" title="">Об авторе</a></li> </ul> </div> </div> <!-- header ends --> <!-- content begins --> <div id="main"> <div id="left"> <h3>ЭТО ИНТЕРЕСНО</h3> <p>Текст содержащий интересную тему! <a href="#">Подробнее...</a></p> <br /> <h3>Ссылки</h3> <ul> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> <li><a href="#">Ссылка</a></li> </ul> <h3>Мои статьи</h3> <ul> <li class="news"> <h4>ММ/ЧЧ/ГГ</h4> <p><a href="#"> СТАТЬЯ... &#8230;</a></p></li> <li class="news"> <h4>ММ/ЧЧ/ГГ</h4> <p><a href="#"> СТАТЬЯ &#8230;</a></p></li> <li class="news"> <h4>ММ/ЧЧ/ГГ</h4> <p><a href="#"> СТАТЬЯ &#8230;</a></p></li> </ul> </div> <div id="right"> <h2>Интелектуальный рост, должен начаться в момент рождения и прекратиться только лишь со смертью.</h2><br /> <h4>Эйнштейн Ученый<br /> 1879 – 1955<br /> Albert Einstein </h4><br /> <p>ТЕКСТ</p> <p>ТЕКСТ<br /> ТЕКСТ<br /> <br /> ТЕКСТ<br /> ТЕКСТ<br /> ТЕКСТ<br /> ТЕКСТ<br /> ТЕКСТ<br /> <br /> ОТ ТАКОГО-ТО ЧИСЛА И ГОДА </p> <p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Коментарии(2)</a> <img src="images/timeicon.gif" alt="" /> 21.02.</p> <h4><a href="#">ТЕКСТ ССЫЛКИ</a></h4><br /> <p>ТЕКСТ</p> <p>ТЕКСТ</p> <p class="date"><img src="images/comment.gif" alt="" /> <a href="#">Коментарии(8)</a> <img src="images/timeicon.gif" alt="" /> 13.46.</p> <h4>&nbsp;</h4> </div> <!--content ends --> </div> </div> </div> <!--footer begins --> <div id="footer"> <p>Copyright &copy; 2015.<br /> ТЕКСТ</p> </div> <!-- footer ends--> </body> </html>

Ответить

BlazinScrubs BlazinScrubs 23.02.2015 13:36:17

А код обязательно записывать вот такой "змейкой" ? Как на последней картинке. Или можно столбиком?

Ответить

Дмитрий Тормосин Дмитрий Тормосин 15.07.2015 22:59:39

Такое написание используется для удобства прочтения кода

Ответить

Валериянка Валериянка 11.12.2015 16:08:02

Ах большое спасибо Вам Михаил! Я скачала видео уроки и там нашла все ошибки, которые сама и допустила. Теперь буду учиться дальше и ещё с большим удовольствием. Тем более когда виден результат это так радует!!! :)))

Ответить

nikitta.s nikitta.s 21.08.2016 12:24:49

подскажите пожалуйста в чем моя ошибка <i>Это курсив</i> <i>Это курсив</i> идентичны но первый с моего сайта а второй скопирован сверху но все равно работает только тот что скопирован с вашего поскольку у вас эта часть <i угол и буква синие а у меня буква красная а угол черный

Ответить

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