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
-
Создано 26.04.2010 17:56:24
-
Михаил Русаков
Комментарии (43):
Очень крутой сайт! Большое спасибо. P.S. заметил небольшую описку: "Также можно записать и так: <b><i>Жирный курсивный текст</b></i>" по-видимому имелось в виду: "<b><i>Жирный курсивный текст</i></b>" так как теги обязаны быть вложенными
Ответить
Ой :) я имел виду: "Также можно записать и так: <b.><i.>Жирный курсивный текст</b.></i.>" по-видимому имелось в виду: "<b.><i.>Жирный курсивный текст</i.></b.>" только без точек разумеется.
Ответить
Спасибо большое, не заметил!
Ответить
Можете дать ссылку на статью, в которой цвет ссылки мы меняли?
Ответить
http://myrusakov.ru/ssylki-izobrageniya-html.html
Ответить
Привет Михаил такой вопрос прописываю <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 почему?
Ответить
Ненормативная лексика на данном сайте запрещена! Что касается вопроса, то ничего не увеличивается, поскольку тег называется <font>, а не <front>.
Ответить
Спасибо на счет лексики извини не повторится
Ответить
Для тега font есть еще атрибут face, какие у него есть значения? Или об этом где то дальше написано
Ответить
Тег <font> теперь лучше не использовать. Все стили задавать надо через CSS.
Ответить
Спасибо большое за сайт я лучше не видел.
Ответить
Я вроде все сделала правильно, но когда я захожу на index.html то там что то вроде закорючек. <html> <head> </head> <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> </body> </html> Скажите что я сделала неправильно?
Ответить
http://myrusakov.ru/php-encoding-problems.html
Ответить
надо в теге <head> писать <meta http-equiv="Content-type" content="text/html; charset=windows-1251"/> если не помогает, пропишите utf-8 вместо windows-1251.
Ответить
Спасибо за статью! Жигайло
Ответить
ка на xhtml валидно сделать зелёный текст ни font ни атрибут text он не поддерживает а как без них даже не могу class задать тексту чтоб через css какой селектор в css за обычный текст отвечает?
Ответить
Цвет задаётся через свойство color в CSS.
Ответить
Не так это я знаю. Но как для обычного текста селектор задать??, если он не в теге а простой обычный текст.
Ответить
Выделить этот текст тегом, например, span.
Ответить
попробуй селектор по id. Его можно пихнут к чему угодно. Как это сделать, я тут писать не буду, без обид.
Ответить
Спасибо а нет селектора отвечающего за весь текст на странице? Если надо весь текст на странице сделать зелёным например. А в span нельзя других тегов использовать закрывать надо постоянно и код большой будет. Если б можно сделать чтоб на всей странице текст цветной. (атрибут text в боди не подходит)
Ответить
body {color: #f00;}
Ответить
Спасибо большое !
Ответить
Привет Михаил, у меня вопрос, если хорошо изучать твои уроки про HTML,CSS и PHP можно зарабатывать свои первые деньги(небольшие конечно) фрееланцерах например, или работать в коком то фирме для начала?или это только основы и более много надо изучать что бы начинать зарабатывать с этим?несколько дней уже читаю твои уроки и очень ясно всё здесь написано,очень удобно здесь изучать. Заранее спасибо.
Ответить
Да, вполне можно. А где именно, это уже как Вам удобнее.
Ответить
Здравствуйте, Михаил. А как вы думаете, каковы шансы 16-ти летнего подростка реализоваться в подобной сфере электронной коммерции?(т.е. создание собственного сайта, размещение рекламы и так далее) или просто ЗАРАБОТАТЬ В ИНТЕРНЕТЕ? Надо ли, если ты(я) будучи отличник и тебе сулит хорошее образование, а значит оплачиваемая профессия в будущем, идти на встречу всему этому? Возможно ли параллельно с учебой,да блин, то там,забегу на перед, с будущей работой осуществить планы в сети интернет? Мне будет ОЧЕНЬ познавательно-ценно ваше мнение.
Ответить
Я так и начинал, обучаясь самостоятельно, параллельно с учебой. Так что все в Ваших руках.
Ответить
подскажите пожалуйста ка изменить текст в XHTML
Ответить
Михаил а еще надо кое-где добавить <br> ну можно так, можно и вот так <br />. Это уже от кого как зависит. А то почти вся писанина сливаются в одну строку. И еще я думаю что после каждого этасамого нужно ставить br чтобы след. был по новой
Ответить
Ну я так понял. Что если хочешь строить сайты то нужно не повторять эти "сайтостройки" а нужно пытаться какие-нибудь сайты повторять. В каком нибудь блокноте. И если что-то не получается то перерыть весь интернет но ответ таки найти. Или спросить у Михаила
Ответить
Михаил привет. Прописываю <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> Цвета прописаны, но все происходит по плану, кроме изменения цвета,остается весь зеленый. В чем проблемка??
Ответить
Внимательнее вложенность проверьте.
Ответить
тег называется не <front>, а <font>
Ответить
Доброго времени суток!)Я все прочитала и сделала по инструкции,но когда открыла получившееся в браузере,то увидела не то чего ожидала,т.е. вместо русских букв там текст вот такоей:Рто РєСѓСЂСЃРёРІ Рто жирное. Помогите пожалуйста ^^"
Ответить
Проблема у Вас с кодировкой, используйте UTF-8.
Ответить
Подскажите, где можно увидеть самый полный список тегов и их атрибутов со спецификацией
Ответить
Дмитрий, посмотрите здесь: puzzleweb.ru (HTML 5), html-css-reference.ru (HTML и CSS), website.mirlive.com, supersanja.narod.ru. Удачи!
Ответить
htmlbook.ru
Ответить
Помогите пожалуйста! Как мне записать, чтоб слова "блог" и "Романа Малинина" в строках: <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="#"> СТАТЬЯ... …</a></p></li> <li class="news"> <h4>ММ/ЧЧ/ГГ</h4> <p><a href="#"> СТАТЬЯ …</a></p></li> <li class="news"> <h4>ММ/ЧЧ/ГГ</h4> <p><a href="#"> СТАТЬЯ …</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> </h4> </div> <!--content ends --> </div> </div> </div> <!--footer begins --> <div id="footer"> <p>Copyright © 2015.<br /> ТЕКСТ</p> </div> <!-- footer ends--> </body> </html>
Ответить
А код обязательно записывать вот такой "змейкой" ? Как на последней картинке. Или можно столбиком?
Ответить
Такое написание используется для удобства прочтения кода
Ответить
Ах большое спасибо Вам Михаил! Я скачала видео уроки и там нашла все ошибки, которые сама и допустила. Теперь буду учиться дальше и ещё с большим удовольствием. Тем более когда виден результат это так радует!!! :)))
Ответить
подскажите пожалуйста в чем моя ошибка <i>Это курсив</i> <i>Это курсив</i> идентичны но первый с моего сайта а второй скопирован сверху но все равно работает только тот что скопирован с вашего поскольку у вас эта часть <i угол и буква синие а у меня буква красная а угол черный
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.