Главная » Все про HTML » Работа с текстом в HTML (материал для начинающих). Урок 3

Работа с текстом в HTML (материал для начинающих). Урок 3

2013-06-09 / Вр:21:14 / просмотров: 31830

В уроке 2 вы пробовали самостоятельно создать свою первую, простейшую веб-страницу.
В этом уроке вы научитесь работать с текстом, а именно, выделять текст курсивом, делать текст жирным, подчеркивать, зачеркивать, создавать заголовки для веб-страницы, менять шрифт и его размер и другое.
Я постараюсь вас не грузить многочисленной информацией, покажу лишь основное, с чем вы будете чаще всего сталкиваться. На ранних этапах ознакомления с основами HTML, вам должно этого хватить.

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

- этот тег предназначен для разбивки текста на параграфы в html документе.
<h1></h1> - <h6></h6> - эти теги предназначены для создания заголовка от 1 до 6 уровня в html документе.
 - этот тег служит для переноса строки в html документе.

Предлагаю посмотреть пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
<h1>Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3>Заголовок h3</h3>
<h4>Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6> Заголовок h6</h6>
<p> Этот тег предназначен для разбивки текста на параграфы в html документе. Параграф 1.</p>
<p>Ну, а это параграф 2. Пример взят с сайта bloggood.ru. <br> Вот и все.</p>
</body>
</html>

Вот результат примера.

Атрибуты в HTML.

Что такое «тег», вы уже знаете, а вот что такое «атрибуты в html» сейчас узнаете.
Итак.

Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:

здесь текст

P – это тег параграфа.
align="center" – это атрибут к тегу с дополнительным правилом.

Я думаю, вы поняли, что такое атрибуты в html.

Атрибуты «H1, H2, H3, H4, H5, H6»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

align: center | left (по умолчанию) | right

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
<h1 align="center"> Заголовок h1</h1>
<h2 align="left"> Заголовок h2</h2>
<h3 align="right"> Заголовок h3</h3>
<h4> Заголовок h4</h4>
<h5 align="center"> Заголовок h5</h5>
<h6 align="right"> Заголовок h6</h6>
</body>
</html>

Результат:

Атрибуты «p»

Чтобы выровнять по горизонтали заголовок, используйте атрибут «align».

align: center | justify | left | right

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
<p align="center"> по центру </p>
<p align="left"> левый край</p>
<p> левый край (по умолчанию) </p>
<p align="right"> правый край</p>
<p align="justify"> здесь текст будет выравниваться одновременно по левому и правому краям документа. Пример взят с сайта bloggood.ru. <br> Вот и все.</</p>
</body>
</html>

Результат:

Итог.
Давайте объединим все примеры вместе и посмотрим результат:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
<h1 align="center">Заголовок h1</h1>
<h2>Заголовок h2</h2>
<h3 align="right">Заголовок h3</h3>
<h4 align="right">Заголовок h4</h4>
<h5>Заголовок h5</h5>
<h6> Заголовок h6</h6>
<p align="justify"> Этот тег предназначен для разбивки текста на параграфы в html документе. Здесь текст будет выравниваться одновременно по левому и правому краям документа.
 Пример взят с сайта bloggood.ru. <br> Вот и все.</p>
</body>
</html>

[просмотреть]

Дополнительные теги для работы с текстом.

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

- этот тег предназначен для выделения текста или слова жирным начертанием. Или ( ).
 - этот тег предназначен для выделения текста или слова курсивом.
 - этот тег предназначен для подчеркивания текста или слова.
<s> </s> - текст будет перечеркиваться.
 - текст верхнего индекса (х²)
 - текст для нижнего регистра (Н₂О)
 - этот тег предназначен для изменения цвета, размера и стиля шрифта в тексте.
<hr> - этот тег предназначен для вставки горизонтальной линии в текст.

Предлагаю посмотреть пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
<strong> этот текст будет жирным. </strong>
<em>этот текст будет выделен курсивом</em>.
<u> этот текст будет подчеркнутый</u>
Вниманиe акция! новая цена <s> 70 000 </s> - 69 999 рублей!<s> </s>
Х<SUP>2</SUP>
Н<SUB> 2 </SUB>О
<hr> - этот тег предназначен для вставки горизонтальной линии в текст.
</body>
</html>

[просмотреть]

Атрибуты «font»

font: SIZE | COLOR | FACE

SIZE – размер текста. Значение задается от 1 до 7. Также можно задавать значения в большую или меньшую сторону с помощью символов «+» и «-».
COLOR – цвет текста.
FACE – шрифт текста.

Предлагаю посмотреть пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
Это простой текст по умолчанию <br>
<FONT SIZE="+2" COLOR="#999999"> Увеличенный шрифт серого цвета на +2</FONT>
<br>
<FONT SIZE="-3" FACE="Times New Roman
" COLOR=" red ">красный текст сделанный шрифтом Times New Roman « -3-го размера» </FONT>
</body>
</html>

Результат:

Атрибуты «HR»

HR: width | size | align | noshade | color

WIDTH – длина линии. Задается размер в (px / %).
SIZE – толщина линии (px).
ALIGN – выравнивание линии по горизонтали. У атрибута «align» есть необходимые значения:
left – выравнивание документа по левому краю.
right – выравнивание документа по правому краю.
center – выравнивание документа по центру (используется по умолчанию).
NOSHADE –закраска линии как сплошной.
COLOR – цвет линии (работает только в Internet Explorer).

Смотрим пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
Текст до линии <hr noshade width="40%" align="left"> Текст после линии <br>
А вот линия без флага noshade и толщиной 5px
<hr width="40%" align="left" size ="5">
</body>
</html>

Результат:

Теперь объединим эти примеры вместе и посмотрим результат:

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"https://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Моя первая веб-страничка на HTML</title>
</head>
<body>
Текст до линии <hr noshade width="40%" align="left"> Текст после линии <br>
<FONT SIZE="-3" FACE="Times New Roman
" COLOR=" red ">А вот линия без флага noshade и толщиной 5px </FONT>
<hr width="40%" align="left" size ="5">
</body>
</html>

[просмотреть]

Переходим к следующему уроку «Как создать нумерованные и маркированные списки в HTML». Урок-4