shape1
shape2
shape3
shape4
shape7
shape8

Изучаем HTML [Урок 2]


Jaliba_Baron

Руководитель
Пользователь
24.09.2015
648
2
929
0
20
pawno-crmp.ru
Скриптер
Элемент <p>: создавать отдельный параграф очень просто, нужно всего лишь добавить пару тэгов (открывающиеся и закрывающиеся) в тело нашего с вами документа (<p></p>).

Пример:

<html>
<head>
<title>Тестовая страница</title>
</head>
<body>
<p>Первый параграф.</p>
<p>Второго параграф</p>
</body>
</html>




Выглядеть будет следующим образом:


Спойлер
yWt6b2Er15c.jpg




Теперь поговорим о тэге, который позволяет нам с вами переносить строку, тэг <br>.

Выглядит это вот так:

<html>
<head>
<title> Тестовая страница </title>
</head>
<body>
<p>Первый параграф.</p>
<p>Второго параграф</p>
<p>Тут у нас с вами<br/>перенос строки</p>
</body>
</html>




Теперь посмотрим как у нас это отображается на странице в браузере:


Спойлер
8aGIouWIVrg.jpg




Думаю о переносе вам тоже стало всё понятно, главное всё это делать самому, после чего эти знания будут откладываться в голове и будете делать всё уже систематично!

Теперь мы затронем тему о "Форматировании текста"

Элементы форматирования: В HTML используется ряд элементов для определения стиля текста. Элементы форматирования были созданы для отображения разных стилей текста.

<html>
<head>
<title>Тестовая страница</title>
</head>
<body>
<p>Обычный текст</p>
<p><b>Текст жирным шрифтом</b></p>
<p><big>Текст крупным шрифтом</big></p>
<p><i>Текст курсивом</i></p> (или же <em>)
<p><small>Текст мелким шрифтом</small></p>
<p><strong>Важный текст (тот же самый жирный)</strong></p>
<p><sub>Подстрочный текст</sub></p>
<p><sup>Надстрочный текст</sup></p>
<p><ins>Вставленный текст</ins></p>
<p><del>Удалённый текст</del></p>
</body>
</html>




Наглядный пример:


Спойлер
he-M9tTkwrA.jpg




О форматировании я думаю рассказал уже достаточно, теперь более подробно мы с вами будем познавать (Заголовки, линии, комментарии)

Заголовки в HTML - документе - в HTML используется 6 уровней заголовков, которые организованы по уровню важности:

<h1><h2><h3><h4><h5><h6> - От большего к меньшему, используется тут такой принцип отображения заголовков, то есть <h1> - будет выделен самым крупным шрифтом и жирным, естественно <h2> и т.д. будут уже уменьшаться.

Не забывайте, что всё это делается только в теле документа! (<body></body>)

Вот так отображаются заголовки:


Спойлер
htGndDM4vrM.jpg




То есть, в данный момент мой документ, в котором я делаю все вместе с вами, состоит вот так:

<html>
<head>
<title> Тестовая страница </title>
</head>
<body>
<p>Первый параграф.</p>
<p>Второго параграф</p>
<p>Тут у нас с вами<br/> перенос строки</p>
<p>Обычный текст</p>
<p><b>Текст жирным шрифтом</b></p>
<p><big>Текст крупным шрифтом</big></p>
<p><i>Текст курсивом</i></p>
<p><small>Текст мелким шрифтом</small></p>
<p><strong>Важный текст (тот же самый жирный)</strong></p>
<p><sub>Подстрочный текст</sub></p>
<p><sup>Надстрочный текст</sup></p>
<p><ins>Вставленный текст</ins></p>
<h1>Заголовок 1<h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<h4>Заголовок 4</h4>
<h5>Заголовок 5</h5>
<h6>Заголовок 6</h6>
</body>
</html>




Крайне не рекомендую использовать заголовки, чтобы сделать текст жирным, ведь для этого если вы ещё не забыли, существуют тэги <b>, <strong>.

Что же, я уже рассказал о заголовках, параграфах, видах форматирования текста, теперь мы займёмся линиями в HTML!

Горизонтальные линии - чтобы добавить в документ горизонтальную линию используется тэг <hr/>. Чтобы её добавить, вам просто необходимо между нужными строками добавить вот такой код в <body></body>.

<hr>




Спойлер

tn0mwAIh-kg.jpg




Как мы видим на картинке выше, у нас добавилась горизонтальная линия, на ширину всей страницы.

Далее перейдём к Комментариям.

Комментарий - комментарии браузером не отображаются, также как в моде который работает на сервере SA-MP, там помечаются комментариями вот таким способом, перед строкой текст ставим "//"

В HTML же делается это совсем по другому, делается это вот так

<!-- Текст комментария -->




Вот так будет выглядеть комментарий у нас в документе.


Спойлер
nrN-4OeittQ.jpg