Урок №2. Теги форматирования текста в HTML
Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.
Многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).
Посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют.
Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока
Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.
Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.
Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами <body> </body> нашей заготовки.
Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).
Мы видим, что текст идет без заголовков, без абзацев, без отступов.
Вот теперь и займемся непосредственным форматированием текста в языке HTML.
Для выделения заголовков используются теги <H1>текст</H1>, <H2>текст</H2> и т.д. до <H6>текcт</H6>.
Цифры после буквы H в теге применяются от 1 до 6.
1 – самый крупный заголовок, 6 – самый маленький заголовок.
Давайте теперь найдем в нашем файле названия сказок и заключим их в теги <H1>…<H1>.
1.<H1>Лис и лошадь</H1>
2.<H1>Лис и кошка</H1>
У тега <H1> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.
Давайте выровняем заголовок по центру. Для этого пропишем:
1.<H1 align="center">
Аналогично и второй заголовок.
Сохраняем и смотрим в браузер.
Заголовки стали по центру.
Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.
А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).
Самостоятельно попробуйте разные значения тега <H>текст</H>. И разные значения align. Выберите любой Вам понравившийся.
Теперь разобьем наш текст на абзацы.
Тег, который это делает — <p>текст абзаца</p>.
Для этого находим начало абзацев и ставим там тег <p>, а в конце абзаца закрываем его </p>.
Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось.
У тега <p> есть параметр align с такими же значениями, что и у тегов <H> — left, right, center. Его работа абсолютно такая же как и у тега <H>.
На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.
Текст можно сделать жирным. При помощи тега <b>или <strong> (кстати, это закрывающиеся теги. Рекомендуется<strong>).
Курсив — <i> или <em>, подчеркнутый <u>, моноширинный <tt> или <kbd>.
Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.
Например:
1.<b> любой текст из сказки</b>
2.<i>…………………………..</i>
3.<u>………………………….</u>
4.<kbd>……………………..</kbd>
Для изменения размера, цвета и шрифта отдельного участка текста используйте тег <font>, его параметры:
fаce="arial" – указывает названия шрифта.
size="3" — размер (значения от 1 до 7).
color="******" – цвет шрифта.
****** — определенный код шрифта (например, 000000 – это черный).
Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:
1.<font face="arial" size="6" color="red'> фрагмент текста сказки </font>
Еще один немаловажный тег <br> применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.
Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в данный урок, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют.
Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.
Итак, теги:
<sub> — подиндексы (H2O)
<sup> — надиндекс (45)
<big> — увеличивает шрифт на 1
<small> — уменьшает шрифт на 1
<address> — сведения об авторе и последнем обновлении страницы (отображаются курсивом)
<cite> — цитаты, отображаются курсивом
<code> — программный код отображается моноширинным шрифтом
<em> — выделенный текст отображается курсивом
<strong> — выделенный текст отображается жирным шрифтом, рекомендуется вместо <b>
<hr> — горизонтальная линия. У этого тэга есть такие параметры, как:
align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов
width="число" — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана
size"число" — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99, a параметр width=1, то получим вертикальную линию, только с ограниченной высотой)
color="цвет" -цвет линии
noshade — отменяет рельефность
Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:
1.<hr width="100%" color="red" >
Поэкспериментируйте с набором и значениями параметров этого тега.
Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer.
Тег <marquee> – контейнер бегающей строки с параметрами:
align="middle(top, bottom)"- выравнивает контейнер относительно окружающего текста.
top — по верхнему тексту, bottom- по нижнему, middle- по середине.
behavior="scroll(slide, alternate)" — scroll — текст прокручивается, slide — скольжение, alternate — текст "плавает" со стороны в сторону.
bgcolor ="цвет" — фоновый цвет для контейнера.
direction="left(right)" — задает направление движения текста.
height="число" — высота контейнера.
hspace="число" — расстояние от контейнера до текста по горизонтали.
vspace="число" — расстояние от контейнера до текста по вертикали.
loop="число" — количество повторений.
width="число" — ширина контейнера.
scrollmount="число" — скорость движения текста.
scrolldelay="число" — время задержки между циклами.
Например, в нашей сказке это может выглядеть так:
1.<marquee align="top" behavior="scroll" bgcolor="blue"
2.direction="left" height="30" width="200"> Как можете? </marquee>
Вот, пожалуй, и все о тегах форматирования текста в HTML. Предлагаю самостоятельно сделать упражнение:
Фоновый цвет страницы сделать черным, цвет текста белым, цвета заголовков красным, внизу сделать подпись курсивом синего цвета. Можете поэкспериментировать с цветами и подобрать свой вариант. Файл с названиями цветов, которые вы можете использовать, находится в архиве.
| 
