Загрузка
Загрузка
Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap
Всем привет!
Поработаем теперь над вставкой текста в 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>
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> закрывающий тег обязателен.
Пример:
<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>
Почему после 2 урока , вместо css началась всякая лажа
Ответить
Декабрь 20th, 2018 at 10:53
а по конкретней
Ответить
ОГРОООМНОЕ спасибо! Благодаря Вам у меня получилось то, над чем я билась 2 часа!
Ответить
Март 31st, 2019 at 21:48
Пожалуйста, Ольга!
Ответить
После 2 урока по html , нет ссылки на 3 уроке , а дана ссылка на 1 урок по CSS , а так уроки очень интересные , спасибо большое!
Ответить
Январь 28th, 2020 at 17:44
Никита, так будет лучше:
http://stepkinblog.ru/html/besplatnyj-kurs-po-osnovam-html.html/
Спасибо за комментарий
Ответить
Огромнейшее спасибо.
Вижу "свет чрез дебри", а я -абсолютный новичок.
С помощью Ваших уроков все настолько проще и понятнее стало.
мозг конечно "кипит" от новой информации.
, то теперь 
если раньше было:
пожалуйста продолжайте вести Просветительские уроки
Ответить
Январь 28th, 2020 at 17:32
Пожалуйста, Наталья. Приятно было почитать такой классный комментарий.
Я с радостью продолжал бы писать уроки на блоге, но в последнее 2-3 года, я вижу, что мой труд не оправдан.
Многие ставят ADBlock и реклама мне не приносит доход, как раньше.
Делиться знаниями, тратит время на изложения материала, не знаю, может быть начну, но пока настроения нет.
Ответить