BloGGood.ru

Блог Костаневича Степана

WordPress, PHP, HTML, CSS, Windows

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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 (материал для начинающих). Урок 3

Атрибуты в HTML.

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

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

<p align="center"> здесь текст </p>

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

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

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

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

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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>

Результат:

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

Атрибуты «p»

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

align: center | justify | left | right

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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>

Результат:

Атрибуты «p»

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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>

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

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

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

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

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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"
"http://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>

Результат:

Атрибуты  «font»

Атрибуты  «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"
"http://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>

Результат:

Атрибуты  «HR»

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

Пример:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://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

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Получай обновления блога!!! Подпишись:

Популярные статьи:

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

  1. Вячеслав

    А вот тут уже немного нужно мозги напрячь. :?:

  2. Avatar photo Степан => автор блога

    Славик, ты решил покорить вершины HTML? Молодчага! Если будут вопросы, пиши или просто позвони.

  3. Тамара Полякова

    Я все-таки решила по-настоящему изучить уроки по HTML кодам. Надеюсь, что хватит терпения и мозгов. Начала с первого урока. Этот урок понятен. Только нужно все запомнить. Поэтому веду конспект. Спасибо Степан за твои нужные уроки!!! Удачи тебе!

  4. Avatar photo Степан => автор блога

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

  5. Николай

    :smile: :smile: :smile:
    Мне 15 лет.Хочу освоить HTML+CSS
    Видел много уроков по HTML но вы объясняете их понятно и нечего лишнего.

  6. Avatar photo Степан => автор блога

    Спасибо, Николай! Очень похвально “респект и уважуха”, что в столь юном возрасте Вы решили освоить такое серьезное дело. Я в свое время однажды очень пожалел, что не начал заниматься этим раньше, а тратил свое время попусту. Буду очень рад, если все мои уроки будут Вам полезны и интересны.

  7. Николай

    Я вот только не могу понять чем отличается HTML от HTML5… :pop-corne: :pop-corne: :pop-corne: :pop-corne: :pop-corne: :pop-corne: :pop-corne: :pop-corne:

  8. Avatar photo Степан => автор блога

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

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

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

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 810
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4716