Загрузка

RUS | ANG | |

StepkinBlog.ru

Пока я творю, я живу!
Блог посвящен: HTML, CSS, PHP, Wordpress, Bootstrap

Главная » Основы HTML » Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

09.06.2015


23:52


7771


пока нет


Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Форматирование текста в HTML. Основы HTML для начинающих. Урок №3

Всем привет!
Поработаем  теперь над вставкой текста в HTML документ. В этом уроке вы научитесь вставлять текст в HTML документ, менять цвет,  подчеркивать, зачеркивать текст и т.д. Проще сказать – научитесь форматировать текст. :???:
Начнем с простого и закончим более сложным.
Для форматирования текста существует множество тегов, всех их вам запоминать не надо, достаточно просто о них знать. Запомнить теги для текста нужно только те, которые часто используются. Зазубривать теги, как в школе зубрят стихи, не нужно – со временем они сами зафиксируются в вашей памяти по мере того, как вы будете часто создавать веб страницы.
Вступление к уроку я сделал, теперь перейдем к практике. Я думаю, вы положили возле себя тетрадку и ручку для того, чтобы сделать полезные записи :idea:

Основные теги для работы с текстом

 Теги для заголовка

<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.

Если откроете файл, то на экране отобразится вот такая картина:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Теги для текста

○ тег разделения текста на абзацы

<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>

Результат:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Тег принудительного переноса строки

<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>

Результат:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Тег, выделяющий текст курсивом

<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>

Результат:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Тег 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>

В результате:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Совместное использование тегов

Вы, наверное, помните, а может уже и подзабыли урок№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>

В результате вы увидите:

Основы HTML для начинающих - Форматирование текста в HTML. Урок №3

Вот и подошли мы к завершению урока №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>

[посмотреть результат]



Случайные записи:

  1. Шрифты в CSS. Основы CSS для начинающих. Урок №6
  2. Выпадающее меню (списки). Основы bootstrap 3 для начинающих. Урок №9
  3. Основы bootstrap для начинающих. Урок №1
  4. Списки в CSS. Основы CSS для начинающих. Урок №10
  5. Оператор условия if else Основы PHP с нуля Урок №9

Последние записи рубрики:

  1. Бесплатный курс по основам HTML
  2. Шпаргалка по HTML на русском языке
  3. Создание простого мини сайта. Практика по пройдённому материалу
  4. Тесты HTML онлайн. Основы HTML для начинающих
  5. Как прописать мета теги. Основы HTML для начинающих. Урок №21

Добавить комментарий

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Подписаться на обновления:

Подпишись на обновления моего блога через e-m@il:

@

Реклама на блоге:

Мои цели на
2017 год:

Довести количество статей до 150

Доделать этот блог

Закончить тему «Основы CSS»

Закончить тему «Основы PHP»

Начать тему «Основы JavaScript»

Добиться посещаемости 500 чел/сутки

Статистика:

Записей: 104
Страниц: 3
Рубрик: 9
Меток: 11
Комментариев: 231

Уведомление для пользователей AdBlock

Включая adblock (блокировщик рекламы) вы лишаете меня заработка, и тем самым лишаете смысла трудиться над своим сайтом, помогать вам и отвечать на комментарии. Если вы решились отключить adblock для моего блога, спасибо!

Как отключить AdBlock?