StepkinBlog.ru
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
09.06.2015
23:52
17467
10
Форматирование текста в HTML. Основы HTML для начинающих. Урок №3
Всем привет!
Поработаем теперь над вставкой текста в HTML документ. В этом уроке вы научитесь вставлять текст в HTML документ, менять цвет, подчеркивать, зачеркивать текст и т.д. Проще сказать – научитесь форматировать текст. 
Начнем с простого и закончим более сложным.
Для форматирования текста существует множество тегов, всех их вам запоминать не надо, достаточно просто о них знать. Запомнить теги для текста нужно только те, которые часто используются. Зазубривать теги, как в школе зубрят стихи, не нужно – со временем они сами зафиксируются в вашей памяти по мере того, как вы будете часто создавать веб страницы.
Вступление к уроку я сделал, теперь перейдем к практике. Я думаю, вы положили возле себя тетрадку и ручку для того, чтобы сделать полезные записи 
Основные теги для работы с текстом
Теги для заголовка
<h1> Заголовок h1 </h1> <h2> Заголовок h2 </h2> <h3> Заголовок h3 </h3> <h4> Заголовок h4 </h4> <h5> Заголовок h5 </h5> <h6> Заголовок h6 </h6>
Тег <h1>-<h6> выделяет текст полужирным шрифтом, а также задает каждому заголовку свой размер. Заголовок <h1> – это самый большой размер, заголовок <h6> – самый маленький. И в дополнение добавлю, что каждый заголовок начинается с новой строки. Закрывающий тег обязателен.
*выравнивание заголовка.
К тегам <h1>-<h6> можно добавить атрибут «align». Он служит для того, чтобы горизонтально выравнивать заголовок.
Значение атрибута «align»:
left – слева (по умолчанию)
right – справа
center – по центру
Пример:
<h1 align= "center"> Заголовок h1 будет по центру </h1>
Теперь сам код:
<html> <head> <title> Теги для заголовка на HTML – StepkinBlog.ru</title> </head> <body> <h1 align= "center"> Заголовок h1 будет по центру </h1> <h2 align= "right"> Заголовок h2 будет справа</h2> <h3>Заголовок h3</h3> <h4>Заголовок h4</h4> <h5>Заголовок h5</h5> <h6> Заголовок h6</h6> </body> </html>
Сохраните файл. Еще раз напомню, что сохранить файл нужно в формате «.html». О том, как это делать, читайте урок№2.
Если откроете файл, то на экране отобразится вот такая картина:
Теги для текста
○ тег разделения текста на абзацы
<p> Текст </p> <p> Текст </p> <p> Текст </p>
Тег <p> разделяет текст на абзацы. Закрывающий тег обязателен.
*выравнивание текста.
К тегу <p> можно добавить атрибут «align». Он служит для горизонтального выравнивания текста внутри параграфа.
Значение атрибута «align»:
left – слева (по умолчанию)
right – справа
center – по центру
justify – по ширине.
Пример:
<p align= "center"> Текст </p>
Теперь сам код:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p align= "center"> Что такое HTML? (текст по центру) </p> <p align= "justify">HTML – (от англ. Hypertext Markup Language ) это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в 1991—1992 годах (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p> <p align= "justify">Гипертекст – это совокупность текстов, ссылок, картинок, таблиц, которые взаимосвязаны. Это вам ничего не напоминает? Да, это обыкновенная веб-страница (здесь текст будет выравниваться одновременно по левому и правому краям документа)</p> <p>Подписывайтесь на обновления моего блога (текст без выравнивания) </p> <p align= "right"> Текст взят из сайта StepkinBlog.ru (текст справа) </p> </body> </html>
Результат:
○ Тег принудительного переноса строки
<br>
Тег <br> принудительно переносит строку в html документе. Закрывающий тег не нужен.
Пример:
<p> Привет! </p> <br> <p> Текст. <br> Другой текст. Третий текст. </p> <p> Теперь пока! </p>
Теперь сам код:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Привет! </p> <br> <p> Текст. <br> Другой текст. Третий текст. </p> <p> Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p> </body> </html>
Результат:
○ Тег, выделяющий текст курсивом
<em>Текст или слово</em>
Или
<i>Текст или слово</i>
Для тега <em> или <i> закрывающий тег обязателен.
○ Тег, выделяющий текст жирным
<strong>Текст или слово</strong>
Или
<b>Текст или слово</b>
Для тега <strong> или <b> закрывающий тег обязателен.
○ Тег для подчеркивания текста
<u>Текст или слово</u>
Для тега <u> закрывающий тег обязателен.
○ Тег для перечеркивания текста
<s>Текст</s>
- текст будет перечеркиваться.
Для тега <s> закрывающий тег обязателен.
○ Тег верхнего и нижнего индекса
<SUP>текст верхнего индекса</SUP> <SUB>текст для нижнего регистра</SUB>
Для тега <SUP> и <SUB> закрывающий тег обязателен.
Пример:
(Х<SUP>2</SUP>)
в результате вы увидите (х2)
H<SUB>2</SUB>O
в результате вы увидите Н2О
○ Тег для вставки горизонтальной линии
<HR>
Для тега <HR> закрывающий тег не нужен.
*атрибуты для тега <hr>.
К тегу <hr> можно добавить такие атрибуты:
WIDTH – длина линии. Задается размер в пикселях или процентах. Пример:
<hr width="400px">
SIZE – толщина линии (px). Пример:
<hr size ="8">
ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть значения:
left – по левому краю
right – по правому краю
center – по центру (используется по умолчанию)
Пример:
<hr align="left">
NOSHADE – делает линию сплошной. Пример:
<hr noshade>
COLOR – цвет линии (не во всех браузерах работает). Пример:
<hr color="red" />
Пример:
<p>Текст</p> <hr width="400px" align="left" size ="8"> <p>Текст</p> <hr noshade width="400px" align="left" size ="8">
Итак, пока далеко не зашли, давайте все пропишем в общий код (текст жирным, курсивом, зачеркнутым, подчеркнутым, текст верхнего и нижнего регистра и линия).
Пример:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <hr width="400px" align="left" size ="8"> <p> Просто текст, а это текст <em>курсивом</em>.<br> Еще есть <strong>жирный текст</strong></p> <p> А здесь можно перечеркнуть <u>текст или слово</u> или вообще <s>зачеркнуть</s></p> <p> Можем написать уравнение x<SUP>2</SUP>+y<SUP>2</SUP>=-1.<br> Хотя, что нам математика, можно и химию зацепить. Вот, например, формула воды: H+0<SUB>2</SUB>O=H<SUB>2</SUB>O</p> <hr noshade width="400px" align="left" size ="8"> Теперь пока! <br> Текст взят из сайта StepkinBlog.ru </p> </body> </html>
Результат:
Тег Font и его атрибуты
○ Тег для изменения цвета, размера и шрифта.
<font> Текст </font>
Для тега <font> закрывающий тег обязателен.
Внимание, сам по себе тег <font> не сможет менять цвет, размер и шрифт текста без дополнительных атрибутов.
*атрибуты для тега <font>
SIZE – размер текста. Значение задается по нарастанию от 1 до 7 Пример:
<font size="7">Текст</font>
COLOR – цвет текста. Пример:
<font color="red">Текст</font>
FACE – шрифт текста. Пример:
<font face="Times New Roman">Текст</font>
Пример:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Просто текст</p> <p><font size="7" color="red" face="Times New Roman">StepkinBlog.ru</font></p> </body> </html>
Тег <center>
<center> Текст </center>
Тег <center> предназначен для выравнивания по центру окна всех элементов. Для тега <center> закрывающий тег обязателен.
Пример:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <center> <p>Просто текст</p> <p>StepkinBlog.ru</p> </center> </body> </html>
В результате:
Совместное использование тегов
Вы, наверное, помните, а может уже и подзабыли урок№2. Там я рассказывал, как правильно писать парные теги.
<тэг1><тэг2><тэг3> Текст </тэг3></тэг2></тэг1>
Вот на основе этого давайте скомбинируем что-то.
Хочу, чтобы текст был жирным, подчеркнутым и красного цвета. Вот так это будет выглядеть в html коде:
<font color="red"><strong><u> Текст </u></strong></font>
Вот готовый код:
<html> <head> <title>Теги для текста на HTML – StepkinBlog.ru</title> </head> <body> <p> Просто текст</p> <font color="red"><strong><u> Текст </u></strong></font> </body> </html>
В результате вы увидите:
Вот и подошли мы к завершению урока №3. Предлагаю закрепить сегодняшний урок. Даже, если сил уже нет и закончилось терпение, переборите себя и попробуйте создать страничку с использованием всех тегов, которые я расписал в этой статье. А для вас, как пример, я оформил свой код так:
<html> <head> <title>Моя страничка на HTML – StepkinBlog.ru</title> </head> <body> <h2 align="center">Основы HTML на StepkinBlog.ru</h2> <p align="right"><em>Автор блога: Костаневич Степан</em></p> <p align="justify"><strong><u>HTML</u></strong> – (от англ. <em>Hypertext Markup Language</em> ) это язык разметки гипертекста, разработанный британским ученным Тимом Бернерс-Ли (Tim Berners-Lee) в <font color="green"><strong>1991—1992</strong></font> годах.</p> <p align= "right"> Текст взят из сайта StepkinBlog.ru</p> <center> <p><font color="red" size ="5">Удачи!!!</font></p> <p>Жду вас на своем блоге <br> StepkinBlog.ru или BlogGood.ru</p> </center> <hr noshade align="left" size ="5"> Цена сайта <s>500$</s> - <font color="red">499$</font> </body> </html>
Случайные записи:
- Создание галереи изображений. Основы bootstrap3 для начинающих. Урок №26
- Учимся создавать пагинацию, хлебные крошки и метки (теги). Основы bootstrap 3 для начинающих. Урок №12
- Cкелет HTML. Основы HTML для начинающих. Урок №1
- Полезные функции php List, Isset, Unset, Empty, Date, Count и Exit. Основы PHP с нуля. Урок №18
- Альтернативный синтаксис управляющих структур. Основы PHP с нуля. Урок №15
Почему после 2 урока , вместо css началась всякая лажа
Ответить
20 декабря, 2018 at 10:53
а по конкретней
Ответить
ОГРОООМНОЕ спасибо! Благодаря Вам у меня получилось то, над чем я билась 2 часа!
Ответить
31 марта, 2019 at 21:48
Пожалуйста, Ольга!
Ответить
После 2 урока по html , нет ссылки на 3 уроке , а дана ссылка на 1 урок по CSS , а так уроки очень интересные , спасибо большое!
Ответить
28 января, 2020 at 17:44
Никита, так будет лучше:
http://stepkinblog.ru/html/besplatnyj-kurs-po-osnovam-html.html/
Спасибо за комментарий
Ответить
Огромнейшее спасибо.
Вижу "свет чрез дебри", а я -абсолютный новичок.
С помощью Ваших уроков все настолько проще и понятнее стало.
мозг конечно "кипит" от новой информации.
, то теперь 
если раньше было:
пожалуйста продолжайте вести Просветительские уроки
Ответить
28 января, 2020 at 17:32
Пожалуйста, Наталья. Приятно было почитать такой классный комментарий.
Я с радостью продолжал бы писать уроки на блоге, но в последнее 2-3 года, я вижу, что мой труд не оправдан.
Многие ставят ADBlock и реклама мне не приносит доход, как раньше.
Делиться знаниями, тратит время на изложения материала, не знаю, может быть начну, но пока настроения нет.
Ответить
Уважаемый, Степан Владимирович!Не давно меня "стрельнуло" заняться программированием. Сначала смотрел видео в YouTube после просмотра до меня не "доходило", и случайно наткнулся на ваш сайт ! Очень просто и понятно , большое спасибо вам ! Благодаря вашим урокам я многому научусь!
Ответить
12 ноября, 2021 at 14:14
Пожалуйста, Александр!
Спасибо за комментарий!
Ответить