Выпуск №2. Теги форматирования текста в HTML

Форматирование текста в html

Доброго времени суток, уважаемые подписчики.

Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.

Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).

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

Итак, начнем.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Для того чтобы нам было проще работать, скачаем архив 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>.

У тега <H1> есть параметр align со значением Left — по левому краю, right — по правому и 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>.

Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.

Например:

Для изменения размера, цвета и шрифта отдельного участка текста используйте тег <font>, его параметры:

fаce="arial" – указывает названия шрифта.

size="3" — размер (значения от 1 до 7).

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

color="******" – цвет шрифта.

****** — определенный код шрифта (например, 000000 – это черный).

Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:

Еще один немаловажный тег <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 — отменяет рельефность

Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:

Поэкспериментируйте с набором и значениями параметров этого тега.

Есть еще один интересный тег, но поддерживается он только браузером 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="число" — время задержки между циклами.

Например, в нашей сказке это может выглядеть так:

Как можете?

Вот, пожалуй, и все что я хотел вам рассказать о тегах форматирования текста в HTML. Предлагаю самостоятельно сделать упражнение:

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

В следующем уроке мы научимся делать ссылки, рассмотрим, какие они бывают, поработаем над вставкой картинок в нашу html страницу, и сделаем картинку ссылкой на любой web-ресурс.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки: ,

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (107)

  1. Маргарита

    Андрей огромное Вам спасибо за то что помогаете разобраться Маргарита

  2. Диана

    Очень интересный урок,большое спасибо!!!

  3. андрей

    ребята огромное спасибо за очень редкую программу

  4. Алексей

    Очень благодарен. Думаю, с Вашей, Андрей помощью, у меня все получится.

  5. Василий

    Спасибо, очень интересная информация.

  6. Надежда

    Спасибо, было интересно.

  7. Петер

    Спасибо. Интересно.

  8. Юрий

    Большое спасибо. Очень интересно и полезно.

  9. AIM

    Спасибо Андрей! Все получилось, с нетерпением жду продолжения курса!)

  10. design

    Коротко, ясно, понятно, доступно для понимания. А возможно сделать обучающий курс по защите сайта?

  11. Нелли

    Эти два кода у меня почему-то не срабатываю.Что-то может не правильно? Подскажите?

    фрагмент текста сказки

  12. Александер

    Кстати Браузер опера его тоже подерживает

  13. Александер

    Спасибо очень интересно

  14. Елена

    Андрей Спасибо большое! Все получилось! В тексте все подробно и понятно написано! Результат потрясающий! Удалось создать такой текст!!! Просто восхитительно! Спасибо!!!

  15. SVet

    С вопросом разобралась прочитав следом второй урок. Благодарю, все получилось.

  16. Виктор Иванович

    Спасибо, все получается. Андрей, на странице есть опечатка: ( Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:
    фрагмент текста сказки ) после слова red должна быть кавычка!!!

  17. Андрей

    В «Firefox» тэг тоже работает. Все очень увлекательно!

  18. Людмила

    С нОвым годом, Андрей!
    playcast.ru/uploads/2009/12/23/1424632.gif
    Пусть тигр сожрет все проблемы быка,

    И смело начистит невзгодам бока.

    Добавит пусть смелости в новом году

    Внесет перемен и чудес чехарду.

    Желаю быть тигром в работе и дома

    Рычать на врагов и ластиться к знакомым,

    Быть ярким, быть сильным, стремиться к мечте

    Пусть тигр вам поможет всегда и везде

    Спасибо большое за материал. Я к сожалению сразу его проанализировать не смогла. У меня больной сын и не всегда удается выполнить задуманные планы. Теперь мне понятно, что это за закорючки когда открываешь какую то часть документы. Такой материал очень здорово помогает.

  19. татьяна

    Мы с ребятами решили открыть сайт. И наш программист, который его делал, бросил (мягко сказано) нас. А я ничего, не понимая, собралась что-то делать.
    СПАСИБО ВАМ за ваши уроки. Они мне очень помогают.

  20. Алмаз

    Большое спасибо, ине очень нравятся эти уроки.Все классно. Отличные уроки с великолепным объяснением

  21. Любовь

    А можно ли вместо текста в marquee вставить картинки?
    Спасибо за урок.

  22. Виктор

    После закрывающего тэга (по крайней мере в «Опере») добавляется лишняя пустая строка. Как её исключить?

  23. Виктор

    Извините, имелся в виду закрывающийся тэг абзаца //

  24. Евгений

    Отличный урок! Большое спасибо.

  25. Николай

    Всё понятно. Спасибо.

  26. Евгений

    Я Вас приветствую, Андрей! Спасибо огромное за уроки. Прекрасно!!!

  27. Лариса

    Спасибо! Все доступно. Понравилось.

  28. Татьяна

    Андрюшечка, солнышко, ты даже не представляешь до чего ВОВРЕМЯ ты свалился на мою голову ИМЕННО С ЭТОЙ ТЕМОЙ! Спасибо огромное!

  29. Елена

    Почему файл в опере не открывается вообще,а в эксплорере вместо текста пишет «01. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. «?

  30. Екатерина

    Спасибо, Андрей! А я уже собиралась идти на платные курсы веб-дизайна, но хорошо, что вовремя отказалась.

  31. kattt

    Спасибо! Кстати, firefоx тоже поддерживает)

  32. kattt

    Елена — удалите эти числа, оставьте только текст

  33. Атя

    Спасибо огромное,очень интересно и хорошо объяснено!))

  34. Anton

    Из первого урога открыл для себя очень хороший тег fixed. Читаю выпуски дальше. До связи.

  35. Karatel

    Здравствуйте Андрей! Спасибо за урок, был очень интересный!:)
    Только остался один вопрос:
    Сказки Братьев Гримм
    Как выровнять контейнер например по center?Так как align=”middle(top, bottom)”- выравнивает контейнер относительно окружающего текста. А если текста нету?Я поставил контейнер в пустой строке, он остается с лева чтобы я не делал…

  36. Юлия

    Здравствуйте Андрей! Огромное спасибо за то что есть такие понятные уроки, они написаны именно для тех кто вообще не имеет понятия что такое HTML. Я правда уже немного с этим знакома, но уроки мне помогли еще лучше понять что это такое и как этим пользоваться. В этом уроке я почерпнула новое и ценное для меня.

  37. Ирина

    Спасибо! действительно качественная информация!!!

  38. Иммагинатор

    Спасибо большое!

  39. Юрий

    На первых пора дается с трудом, но осилим зря что ли 9 лет в армии служил, там тяжелее было, огромное спасибо за уроки, как в первом классе, но приятно!!! Еще моя покойная бабушка говорила , слушай внучек больше не старых, а бывалых, что я сейчас и делаю. Всех тебе благ Андрей и главное здоровья , остальное приложится!

  40. Tanuxa

    Этот урок просто супер!!! Всё сделала, фон чёрный, текст белый и т.д. И контейнер с бегающей строкой сделала — у меня получилось так: контейнер чёрный, текст белый, размер контейнера подогнала по размеру шрифта, размер шрифта поставила 7, прокручивание текста — scroll, и другие параметры установила. А надпись в контейнере «Вот и сказочке конец!» — классно!!!
    Протестировала в браузерах «Opera», «Google Chrom», «Mozilla FireFox», «Internet Explorer» — всё смотрится хорошо и контейнер тоже без проблем работает во всех браузерах!!! Спасибо за урок!!! :)

  41. Tanuxa

    Прочитав комментарии, я попробовала сделать вместо текста вставить изображение — ПОЛУЧИЛОСЬ!!! :)

  42. Мархабо

    Всё получается,так здорово!!! Спасибо,Андрей.
    Firefox тоже поддерживает.

  43. сергей

    Спасибо! Все получается! Восторга выше крыши!

  44. Владимир

    Спасибо Андрей! Очень большое спасибо!!!

  45. Наталья

    Сначала думала не разберусь,а теперь понравилось.Здорово!!!!!!! Спасибо

  46. Ольга

    А у меня wordpad открыл какую-то галиматью( значки и закорючки) И я опять ничего не сделал !!!Спасибо за внимание. Я Двоечница ! Какая досада!…….