Доброго времени суток, уважаемые подписчики.
Этот урок мы посветим форматированию текста в html . Рассмотрим, какие теги для этого применяются.
Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).
Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют.
Итак, начнем.
Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке:
Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.
Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.
Верю, что да.
Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами нашей заготовки.
Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).
Мы видим, что текст идет без заголовков, без абзацев, без отступов.
Вот теперь и займемся непосредственным форматированием текста в языке HTML.
Для выделения заголовков используются теги
текст
,
текст
и т.д. до
текcт
.
Цифры после буквы H в теге применяются от 1 до 6.
1 – самый крупный заголовок, 6 – самый маленький заголовок.
Давайте теперь найдем в нашем файле названия сказок и заключим их в теги
…
.
XHTML
Лис и лошадь
Лис и кошка
У тега
есть параметр align
со значением Left
— по левому краю, right
— по правому и center
— по центру.
Давайте выровняем заголовок по центру. Для этого пропишем:
XHTML
Аналогично и второй заголовок.
Сохраняем и смотрим в браузер.
Заголовки стали по центру.
Для упрощения работы можно одновременно держать открытыми код страницы в блокноте и браузере.
А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).
Самостоятельно попробуйте разные значения тега
Теперь разобьем наш текст на абзацы.
Тег, который это делает —
текст абзаца
.Для этого находим начало абзацев и ставим там тег
, а в конце абзаца закрываем его
.Сохраняем исходный файл с кодом (ctrl+s), в браузере жмем кнопку "обновить" и смотрим, что получилось.
У тега
есть параметр align
с такими же значениями, что и у тегов
На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.
Текст можно сделать жирным. При помощи тега или (кстати, это закрывающиеся теги. Рекомендуется ).
Курсив — или , подчеркнутый , моноширинный или .
Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.
Например:
XHTML
любой текст из сказки ………………………….. …………………………. ……………………..
Для изменения размера, цвета и шрифта отдельного участка текста используйте тег , его параметры:
fаce="arial" – указывает названия шрифта.
size="3" — размер (значения от 1 до 7).
color="******" – цвет шрифта.
****** — определенный код шрифта (например, 000000 – это черный).
Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:
XHTML
фрагмент текста сказки
фрагмент текста сказки |
Еще один немаловажный тег
применяется для принудительного перехода текста на новую строку. В использовании он прост, ставите его в том месте, начиная с которого текст должен отображаться с новой строки. В принципе по этому тегу добавить больше нечего, поэтому двигаемся дальше.
Следующую группу тегов (исходя из своего опыта) используют довольно редко, поэтому подробно рассматривать их мы не будем. Включил я их в данный урок, чтобы показать возможности языка, и вдруг вам они когда-нибудь понадобятся. Чтобы вы знали, что такие возможности существуют.
Работу этих тегов, предлагаю рассмотреть самостоятельно, как раз будет для вас полезное упражнение.
Итак, теги:
— подиндексы (H 2 O)
— надиндекс (4 5)
— увеличивает шрифт на 1
— уменьшает шрифт на 1
— цитаты, отображаются курсивом
— программный код отображается моноширинным шрифтом
— выделенный текст отображается курсивом
— выделенный текст отображается жирным шрифтом, рекомендуется вместо
— горизонтальная линия. У этого тэга есть такие параметры, как:
align=center(left, right) -выравнивание, с этим параметром мы знакомы из других тегов
width="число" — длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана
size"число" — толщина линии (меньше 100 пикселей, т.е. если задать параметр size=99 , a параметр width=1 , то получим вертикальную линию, только с ограниченной высотой)
color="цвет" -цвет линии
noshade — отменяет рельефность
Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:
XHTML
Поэкспериментируйте с набором и значениями параметров этого тега.
Есть еще один интересный тег, но поддерживается он только браузером Internet Explorer. Честно говоря мне его на практике использовать не приходилось.
Текст в HTML-документах форматируют с помощью соответствующих тегов. В таблице приведены теги, используемые для форматирования символов, и заданный ими эффект.
| Тег HTML | Эффект | Пример |
|---|---|---|
| Текст | Написание текста жирным шрифтом | Текст |
| Текст | Жирное начертание текста | Текст |
| Текст | Написание текста курсивом | Текст |
| Текст | Выделение важных фрагментов текста (текст отображается курсивом) | Текст |
| Текст | Подчёркивание текста | Текст |
| Перечёркивание текста | Текст | |
| Текст | Верхний индекс | 100 м 2 |
| Текст | Нижний индекс | H 2 SO 4 |
Кроме этого можно определять различные параметры шрифта. В частности, с помощью тега ... задают гарнитуру шрифта, размер и цвет шрифта. Этот тег одинарный, действует на весь текст, размещенный внутри контейнера.
- FACE="значение"
- гарнитура шрифта. Если указанной гарнитуры на компьютере пользователя нет, то текст будет оформлен с использованием гарнитуры по умолчанию. В атрибуте FACE
иногда записывают через запятую несколько гарнитур, тогда браузер выбирает гарнитуры по списку: при отсутствии первого использует вторую и т. д. Значение атрибута следует подавать в кавычках.
Пример:Tahoma , Arial Black
Результат:
Tahoma , Arial Black - SIZE="значение"
- размер шрифта (целое число от 1 до 7). Атрибут SIZE
со знаком "минус" (или "плюс") означает, что размер шрифта будет уменьшен (или увеличен) на соответствующую величину относительно заданного по умолчанию. Значение без знака задает абсолютный размер шрифта.
Пример:1 ... 7
Результат:
1 , 2 , 3 , 4 , 5 , 6 , 7 - COLOR="значение"
- цвет шрифта. Как значение цвета можно использовать названия цветов английском языке, такие как red
, green
, blue
и т. п., или шестнадцатеричные значения (записанные в шестнадцатеричной системе счисления), начинающиеся с символа #
и последовательно задают красный, зеленый и синий цвета, которые должны быть смешаны для получения нужного оттенка. Последнее более предпочтительно, т. к. в первом случае выбор оттенка зависит от настроек конкретного браузера клиента! Пример:
Текст , Текст
Результат:
Текст , Текст
Для оформления сайта обычно используют набор цветов, который называют . Он состоит из 216 элементов. Особенностью "безопасных" цветов является то, что они не меняются в случае отображения различными браузерами или на разных мониторах, т. е. эта палитра обеспечивает точную передачу на разных мониторах того, что задумал веб-дизайнер. Если любая из трех составляющих шестнадцатеричного значения отличается от 00 , 33 , 66 , 99 , СС или FF , то цвет не является безопасным. Значения атрибутов SIZE и COLOR можно записывать без кавычек, но лучше всё делать по правилам.
Есть и другие теги, которые можно применять для изменения параметров текста:
- Teкст - увеличение размера шрифта. Размер символов текста увеличивается на единицу относительно текущего уровня.
- Teкст - уменьшение размера шрифта. Размер символов уменьшается на единицу относительно текущего уровня.
Teкст- создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.
<Р> - початок нового абзаца; його прийнято записувати в кінці попереднього. Наступне речення починатиметься з нового, вирівняного до лівого краю абзаца без відступу у першому рядку.
- наступний за цим тегом текст буде наведено у новому рядку без пропуску порожнього рядка.
- буде проведена горизонтальна лінія.
<В> текст - товстий шрифт тексту, що є між тегами. |
<І> текст - шрифт-курсив.
текст - підкреслений шрифт.
текст - нижній індекс, наприклад у Н 2 О.
текст - верхній індекс, наприклад, 1° вулиця, а 2 .
текст - великий шрифт.
текст - малий шрифт.
<ЕМ> текст - виокремлений курсивом текст (тег І).
<В> <І> текст - товстий курсив. Цей приклад демонструє застосування принципу вкладення тегів.
Окремим типом абзаца є заголовок. Є шість видів заголовків, які відрізняються розмірами символів: Теги
Результат на екрані
Заголовок 1.
Заголовок 2.
Заголовок 3. Заголовок 4. Заголовок 5.
Заголовок 6.
Заголовок за замовчуванням вирівнюється до лівого краю вікна. Якщо вирівнювання заголовка чи іншого елемента на сторінці потрібно задати явно, то використовують теги вирівнювання:
Інформацію можна подати у вигляді таблиці без рамок за допомогою парного тега
.... Текст в середині цього тега оформляють засобами табуляції. Броузер такий текст пере-форматовувати не буде. Теги для створення таблиць з рамками тут не розглядатимемо.
"5. Тег задання параметрів шрифта FONT. Щоб задати назву конкретного шрифта, його розмір і колір використовують парний тег FONT з параметрами FACE, SIZE та COLOR, наприклад,
текст
Якщо на комп"ютері клієнта встановлено шрифт Decor, то він буде застосований до даного тексту, інакше броузер застосує шрифт Arbat чи Kudriashov, інакше - деякий свій стандартний шрифт, наприклад, Times New Roman. Розміри символів шрифта можуть бути від 1 до 7. Розмір 3 вважається стандартним, він орієнтовно
відповідає 10 пікселям. Розмір 7 є найбільшим. Число 2 як значення параметра SIZE означає другий розмір шрифта, число +2 означає, що розмір шрифта має бути на дві одиниці більший, ніж стандартний, тобто п"ятий, число -2 означатиме перший розмір шрифта - на дві одиниці менший, ніж стандартний.
Колір тексту буде червоний. Основні кольори мають такі назви:
black - чорний green - зелений
navy - темносиній teal - бірюзовий
silver - сірий lime - яскраво-зелений
blue - синій aqua - блакитний
maroon - малиновий olive - темно-зелений
purple- бузковий gray - темно-сірий
red - червоний yellow - жовтий
fushsia - рожевий white - білий
Завдання 1. Створіть свою особисту Web-сторінку. Викличіть Notepad чи деякий Web-редактор. Введіть текст про себе за наведеним нижче зразком і збережіть його у файлі filel.htm:
Це Web-сторінка Світлани Марущак
Я вчуся на першому курсі на факультеті прикладної математики Державного yHiBepcHTeTy"JIbBiBCbKa політехніка " . Мені 17 років. Мої улюблені предмети: інформатика, математика, англійська мова, історія. Я люблю слухати хорошу музику, читати пригодницькі романи, подорожувати влітку, кататися на гірських лижах взимку, ходити на дискотеку в любу пору року, інколи читати конспекти.