<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

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

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

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

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

Подписавшись по 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 угол и буква синие а у меня буква красная а угол черный

Ответить

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