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

Форматирование текста в 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>.

<H1>Лис и лошадь</H1>
<H1>Лис и кошка</H1>

У тега <H1> есть параметр align со значением Left — по левому краю, right — по правому и center — по центру.

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

<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>.

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

Например:

<b> любой текст из сказки</b>
<i>…………………………..</i>
<u>………………………….</u>
<kbd>……………………..</kbd>

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

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

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

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

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

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

<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 — отменяет рельефность

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

<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="число" — время задержки между циклами.

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

<marquee align="top" behavior="scroll" bgcolor="blue"
direction="left" height="30" width="200"> Как можете? </marquee>

Как можете?

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

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

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

Практика HTML5 и CSS3 с нуля до результата!

Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3

Получить

Метки: ,

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

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

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

  1. Руслан

    Надеюсь с Вашими уроками познать первые азы сайтостроения, спасибо, жду продолжения

  2. Александр

    Спасибо, очень нужная информация!

  3. Алексей Николаеваич

    Пока очень хорошо.Ждем продолжения.

  4. Геннадий

    Спасибо Андрей.Жду продолжения.

  5. Наталия

    Андрей, спасибо!!!
    У меня, наконец-то, всё получилось! Попробовала всё, что дано в уроке. Всё читается, открывается и соответствует описанию.

  6. Ольга

    Тег работает и в Опере..

  7. Светлана

    Большое спасибо автору! Пригодиться!

  8. Поревидема

    Большое спасибо! очень хорошо и понятно написано. небольшими шагами,зато уверенно, здорово.

  9. Серафима

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

  10. olga

    Андрей, спасибо большое. Ура, получается! Здорово. Хочется еще и еще эксперементировать.

  11. алексей

    спасибо огромное, я всё хоть начал маленько понимать ,что такое html

  12. Михаил

    Андрей, спасибо. В материале все доступно и доходчиво. У меня все получается, перехожу к следующему выпуску!

  13. Сергей

    Да, Андрюша, уроки построены доступно и интересно! Я сам преподавал информатику ранее, и смотрю на Ваш план урока с точки педагога. Очень хорошая программа! Жду далее нового урока!
    С уважением, Сергей!

  14. Виктор

    Андрей,спасибо.Хотя для новичка как я, тяжеловато.Год как с компом начал работать.

  15. Bac9ITko

    Анндей,спасибо вашей команде,что есть такие рассылки очень полезные уроки
    думаю для многих кто действительно хочет знать больше.=)

  16. nikolay

    Спасибо. Будем работать.

  17. Константин

    Огромное спасибо от всех начинающих.Это просто злорово!

  18. ildorado

    Попробуем разобраться более детально.

  19. Татьяна

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

  20. Александр

    Добрый вечер, Андрей!

    Проработал Ваш второй урок. В целом все понятно, правда предложенный Вами текст для форматирования в разных браузерах
    выглядит по-разному. Да вот еще что, у меня не получилось создать контейнер с движущимся текстом внутри,чего-то я не
    допонял. Попробую разобраться чуть позже. У меня вот какой вопрос. Как правильно отформатировать текст, перенесенный
    из документа, сжатого в «djvu» формате? Я попробовал сделать таким образом — выделяю нужный раздел документа в прогамме
    открывающей формат «djvu», копирую в буфер обмена и далее вставляю на страницу программы «Dreamweaver». С этой программой я сам уже чуть-чуть познакомился. А дальше у меня не получается изменить основу цвета вставленного документа.
    Попытка использовать тэг «bgcolor» приводит только лишь к изменению фона HTML-страницы программы «Dreamweaver», что меня
    не совсем устраивает. Прошу Вас помочь мне решить эту мою проблему.

    С уважением, Александр

  21. николай

    Огромное спасибо Андрей . Месяц как сел за комп и пока не всё понимаю .Но очень надеюсь что с Божьей помощью и вашими молитвами разберусь .!!С уважением к вашей нужной работе Николай .

  22. Любовь Минеева

    Потрясающие сделала для себя открытия!!! Андрей, я очень благодарна тебе за предоставленные мне и другим знания. Вернется тебе все старицей

  23. Сергей

    у меня плохо настроен винд вирусов много и прочих настроек нужно переустановить и прочее неправильгого

  24. Игорь

    Спасибо за урок, Андрей!
    Два вопроса. Первый — почему при рассмотрении параметра «align» не упоминается значение «justify»? И в книжках, посвященных HTML, то же самое. Почему авторы не любят это значение? А ведь его использование позволяет более красиво выделить текст.
    И второй вопрос — что означают значения от «1″ до «7″ параметра «size» тега «font»? Есть какая-либо аналогия с пикселями или пунктами?

  25. Лена

    ДА! Спасибо!
    Это так удивительно! Ни когда бы не подумала, что такое может мне нравиться, сидеть и ковыряться в тексте.

  26. Павел

    Тег прекрасно видит и Mozilla Firefox. Я только им пользуюсь

  27. Viktor

    Неполучилось с самого начала—сказка в ворд-пад открылась иероглифамы-много непонятного и скопировать нельзя , в блокноте это занимат всего 3-4 буквы потом открыть в браузере никак . почему-то из 4 в той таблице есть только эксплорер и это все начало мигать пошло вразнос —я перезагрузил и признаюсь в безпомощности

  28. игорь

    подскажите пожалуйста где мне взять таблицу с кодами шрифта (например, 000000 – это черный…..)

    • Наиль

      Привет советую набрать В яндексе : программа для подбора цвета html — самым первым стоять подборка в онлайн, я лично им пользуюсь-удобно.(и скачивать не надо.)

  29. Станислав

    Андрей спасибо за урок! Жду продолжения.

  30. Гуля Успешная

    Информация — то что надо! Спасибо большое!!!

  31. Дмитрий

    Шикарный и интересный урок!! как новичку мне это интересно аж до мурашек давай еще жду как наркотика!!!

  32. Дмитрий

    Спасибо огромное Андрей. Особенно за цветовую табличку). Очень нужные уроки!

  33. Денис

    Очень полезаня информацыя! Спасибо)Жду слудуйщего урока!

  34. Максим

    Вот мой вариант самостоятельного упражнения.

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

    Привет

  35. Роза

    Всё получилось. Только бегующая строка. Текст в ней был выше чем последующий текст. У Вас контейнер идёт отдельно от всего текста. А когда этот контейнер вставлен в текст, то как бы хочется, чтобы он был наравне.Пробовала <marquee align="middle"…..,но не получилось.

  36. игорь гольдберг

    Спасибо!
    html 5 поддерживает это?

  37. Александр

    Ну вообщем содержательно, полезно и с примерами!!!

  38. Валентин

    С видео на первом уроке намного проще. А здесь не совсем понятно, тем более когда только начинаешь учиться.

  39. Алексей

    Спасибо вам еще раз Андрей прочитал и с первово раза все стало понятно.

  40. светлана

    А и не знала,что тег идет от1 до6.Спасибо за такие подробности.

  41. Любовь Островская

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

    • Andrey Bernacki

      Если что-то не будет получаться, высылайте ваши вопросы на e-mail, и сразу прилагайте код страницы в которой что-то не получается.

  42. Татьяна Терехова

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

  43. Валентин

    После урока о структуре сайта в формате html я , честно сказать , ожидал урока по форматированию страницы. То есть хотелось бы вначале узнать как страницу разбить на блоки , Первое — создать шапку с названием сайта , Второе — блок с основной информацией ( для текста , фото , аудио и видио ) , и третье — боковые — для перехода на другие страницы этого сайта или другие сайты — сателиты , рекламы и других возможных ресурсов.
    То что получается после урока по форматированию текста — хорошо , но подходит для создания минисайта .

  44. Баночкин Сергей

    Пробовал вставлять картинку в бегущую стороку, в ваш файл, Андрей, и в свой. Бегут картинки по разному в первом случае появляется рисунок целиком и убегает в противоположный край как за кулису..
    А в моем отдельном файле герой выбегает из за левой кулисы сначала нос потом голова, а затем и все остальное и в проавой так же исчезает.
    а вотЮ — scrollmount=»число»
    Совершенно не работает и ставил 2 и ставил 125 все равно бегут картинки с одной и той же скоростью… приблизительно 12 пикселей в секунду…
    = Баночкин С. =

  45. Вероника

    Спасибо большое.
    Все получается!!!!

  46. Валентина Алексеевна

    Спасибо, спасибо!
    Уро прекрасные. Всё получается.

  47. Анастасия

    Понятно всё,но не сразу.Некоторые моменты пропущенны,над которыми можно сидеть пол-часа.Например,где и чего прописывать

  48. Ярослав

    Доброго дня !

    Чому в мене не вирівнюється два різні тексти заключені у різні діви.

    Я вже і класи їм назначив. Попробував у стилях вирівняти. не виходить. маргінами падінгами. не знаю.

    підкажіть будь-ласка !

    • Андрей Кудлай

      Здравствуйте, Ярослав.
      Все вопросы, связанные с кодом, Вы можете задать на нашем форуме. Создайте тему, выложите код и кто-нибудь Вам обязательно поможет.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree