Урок 3 - форматирование текста

Progger | 01.05.2011, 20:13:41 | Просмотров: 4003

УРОК 3

Так мы дошли до 3 урока уже умея создавать web-странички. Теперь давайте их заполнять. Выучим теги форматирования текста.

Напоминаю, что коды не копируйте, а пишите сами, иначе ничего не получится!!!!

1. Парный тег - смысл тега: делает текст жирным.

Пример использования:

Code

Этот текст жирный

Вставьте этот код между тегами <body>. Сохраните и просмотрите результат. Если вы всё сделали правильно, то на вашей страничке появиться жирный текст (в дальнейшем сохраняйте и просматривайте результат после каждого нового изученного тега).

2. Парный тег -смысл тега: делает текст курсивным

Пример использования:

Code

Этот текст курсивный

Вы можете сделать текст жирным и курсивным:

Code

Этот текст жирный и курсивный

3. Есть такой тег как - это параграф. Этот тег не обязательный но всё же он полезен например при страничке со статьями. Этот тег парный. Его можно использовать много раз. Внутри параграфа можно изменять настройки текста. В общем смысл тега: разделение между собой предложений или текстов. Рассмотрим тег настройки текста: например установки цвета текста. Устанавливать цвет текста внутри параграфа у нас будет парный тег . Внутри него после слова span напишем слово style, после слова напишем символ «=» и поставим кавычки, далее напишем color: red (можете написать любой цвет по-английски). В итоге у нас может получиться так:

Code

Первоеслово красное

Тогда у вас первое слово будет красное, а остальной текст чёрный. Можно конечно написать тег и задать цвет другим словам. Но можно задать цвет всему параграфу, таким образом:

Code

Первоеслово красное

Тогда всё содержимое кроме того отрезка текста, который мы выделили тегом будет синим цветом, а первое слово красным. Менять цвет текста можно и без тега . Но пока что остановимся на этом. В общем, тег полезная вещь.

Также внутри тега можно установить расположение текста. Например, по центру, по левому краю или по правому. Это делается так:

Чтобы выровнять текст по центру напишите внутри тега align="center", должно получится так:

Code

текст

Ваш текст расположится по центру экрана. Чтобы выровнять по левому краю, вместо слова center напишите left. Чтобы по правому right.

Те слова, которые стоят после тегов, как style и align называются атрибутами. Есть такой атрибут, как size. Давайте используем его:

Code

Этот текст очень маленький

Code

Этот текст очень большой

Цвет текста, можно также контролировать атрибутом color. Например:

Code

Этот текст зелёный

Может быть, вы удивитесь, почему текст зелёный, ведь мы нигде не писали green. Объясню: цвет можно писать названием по-английски или написать его шестнадцатеричный код. Данный код - #339900 – зелёный. Шестнадцатеричных кодов цветов очень много. Найти вы можете их, например в яндексе. Там огромное количество.

4. Непарный тег - смысл тега: перевод на новую строку.

Пример использования:

Code

слова:

 Первый абзац

 Второй абзац

 Третий абзац

5. Парный тег <pre>-смысл тега: сохранение форматирования текста в таком виде, в котором он был в коде.

Пример использования:

Code

<pre>

В этой речи мы сделаем отступ, и перейдём на новую строчку

Без тега (br). Угловые скобки писать нельзя, так как они будут опознаны как тег.

Теперь закроем тег.

</pre>

6. <H*>-парный тег. Существует шесть уровней заголовков, от первого до шестого (<H1> <H2> <H3> и т.д.) Первый уровень самый большой, далее идёт с уменьшением. Внутри этого тега можно использовать атрибут align

Пример использования:

Code

<H1 align="center">Этот текст будет огромный и будет располагаться по центру</H1>

7. <BLOCKQUOTE> - парный тег. Смысл тега: цитирование

Пример использования:

Code

<blockquote>Этот текст будет цитатой</blockquote>

8. Комментарий. Комментарии помогут вам при написании кода, чтобы не запутаться, или что-либо напомнить. При этом комментарии не видны на
странице.

Использование:

Code

Мы уже знаем, как изменять цвет текста. Для этого есть атрибуты color и style. Их можно использовать внутри параграфов, что обычно используются при написании статей. Но можно задать цвет текста для всего документа. Для этого в тег <body> добавьте атрибут text. После него напишите символ «=» и в кавычках название цвета или шестнадцатеричный код.

Например:

Code

И весь текст, который находится между парного тега <body> будет красным.

Вам, наверное, надоел этот белый фон? За фон отвечает атрибут bgcolor который вставляется в тег <body>. Например:

Code

В данном случае фон вашей страницы будет оливковым.

И давайте разберём последний нужный тег при форматировании текста. Это <HR> - этот тег делаем нам горизонтальную линию. Длина и толщина, которой задаётся атрибутами width и size.

<HR>-это одиночный тег. Попробуйте его вставить в любое место на вашей странице. Вы увидите тонкую линию, которая разделяет экран.

Давайте сделаем её покороче и потолще. По умолчанию длина равна 100%, за длину отвечает атрибут width. Внутри <HR> напишите width=”50%”. И вы увидите, что линия уменьшилась в 2 раза. Вы можете регулировать длину, написав другое количество %. Например 25%, тогда линия станет короче в 4 раза. Ну, в прочем с длиной разобрались, перейдём к толщине. Пропишем атрибут size="*" вместо звёздочки напишите желаемую вами толщину в пикселях, например 10. и вы увидите, как ваша линия стала толще.
Например:

Code

И напоследок, вы можете изменить цвет линии, добавив атрибут color, с ним мы уже знакомы, попробуйте задать цвет линии без моей помощи.

Напоминаю, что коды не копируйте, а пишите сами, иначе ничего не получится!!!!

Специально для вас – Линьшин Никита (Progger)

Теги: форматирование, изучение, html, теги, текст