Выпуск №2. Форматирование текста в html.
15.07.2009 Рубрика: Обучение \ Курс по HTML&CSS
Доброго времени суток, уважаемые подписчики.
Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.
Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно "обойти", используя каскадные таблицы стилей (css).
Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют.
Итак, начнем.
Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока
Возьмем из высланного Вам архива файл "Лис и лошадь.doc" и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.
Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.
Готово?
Верю, что да.
Теперь вернемся в word, скопируем весь наш текст из файла "сказка.doc" и вставим его между тегами <body> </body> нашей заготовки.
Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).
Мы видим, что текст идет без заголовков, без абзацев, без отступов.
Вот теперь и займемся непосредственным форматированием текста.
Для выделения заголовков используются теги <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 страницу, и сделаем картинку ссылкой на любой web-ресурс.
С уважением, Бернацкий Андрей.
Проект webformyself.com – основы самостоятельного сайтостроения.
| Подписаться |
|
Поделиться |
|
Метки: html теги форматирования текста, форматирование текста в html
Популярные записи
Монетизация сайта с помощью ссылочных бирж.
Как создать свой первый профессиональный дизайн сайта с нуля.
На пути к монетизации сайта: увеличиваем рейтинг сайта через наращивание ссылочной массы.
Загибающийся флеш-уголок для сайта.
Создание шаблона для отдельной страницы WordPress.
Андрей огромное Вам спасибо за то что помогаете разобраться Маргарита
Нравится или не нравится:
0 
0
Очень интересный урок,большое спасибо!!!
Нравится или не нравится:
0 
0
ребята огромное спасибо за очень редкую программу
Нравится или не нравится:
0 
0
СПАСИБО…
Нравится или не нравится:
0 
0
Очень благодарен. Думаю, с Вашей, Андрей помощью, у меня все получится.
Нравится или не нравится:
0 
0
Спасибо, очень интересная информация.
Нравится или не нравится:
0 
0
Спасибо, было интересно.
Нравится или не нравится:
0 
0
СПАСИБО
Нравится или не нравится:
0 
0
Спасибо. Интересно.
Нравится или не нравится:
0 
0
Большое спасибо. Очень интересно и полезно.
Нравится или не нравится:
0 
0
Спасибо Андрей! Все получилось, с нетерпением жду продолжения курса!)
Нравится или не нравится:
0 
0
Коротко, ясно, понятно, доступно для понимания. А возможно сделать обучающий курс по защите сайта?
Нравится или не нравится:
0 
0
Эти два кода у меня почему-то не срабатываю.Что-то может не правильно? Подскажите?
фрагмент текста сказки
Нравится или не нравится:
0 
0
Кстати Браузер опера его тоже подерживает
Нравится или не нравится:
0 
0
Спасибо очень интересно
Нравится или не нравится:
0 
0
Андрей Спасибо большое! Все получилось! В тексте все подробно и понятно написано! Результат потрясающий! Удалось создать такой текст!!! Просто восхитительно! Спасибо!!!
Нравится или не нравится:
0 
0
Спасибо!!!
Нравится или не нравится:
0 
0
С вопросом разобралась прочитав следом второй урок. Благодарю, все получилось.
Нравится или не нравится:
0 
0
Спасибо!
Нравится или не нравится:
0 
0
Спасибо, все получается. Андрей, на странице есть опечатка: ( Давайте выделим фрагмент текста крупным красным шрифтом. Сделать это можно следующим образом:
фрагмент текста сказки ) после слова red должна быть кавычка!!!
Нравится или не нравится:
0 
0
В «Firefox» тэг тоже работает. Все очень увлекательно!
Нравится или не нравится:
0 
0
С нОвым годом, Андрей!
Пусть тигр сожрет все проблемы быка,
И смело начистит невзгодам бока.
Добавит пусть смелости в новом году
Внесет перемен и чудес чехарду.
Желаю быть тигром в работе и дома
Рычать на врагов и ластиться к знакомым,
Быть ярким, быть сильным, стремиться к мечте
Пусть тигр вам поможет всегда и везде
Спасибо большое за материал. Я к сожалению сразу его проанализировать не смогла. У меня больной сын и не всегда удается выполнить задуманные планы. Теперь мне понятно, что это за закорючки когда открываешь какую то часть документы. Такой материал очень здорово помогает.
Нравится или не нравится:
0 
0
Мы с ребятами решили открыть сайт. И наш программист, который его делал, бросил (мягко сказано) нас. А я ничего, не понимая, собралась что-то делать.
СПАСИБО ВАМ за ваши уроки. Они мне очень помогают.
Нравится или не нравится:
0 
0
Большое спасибо, ине очень нравятся эти уроки.Все классно. Отличные уроки с великолепным объяснением
Нравится или не нравится:
0 
0
А можно ли вместо текста в marquee вставить картинки?
Спасибо за урок.
Нравится или не нравится:
0 
0
После закрывающего тэга (по крайней мере в «Опере») добавляется лишняя пустая строка. Как её исключить?
Нравится или не нравится:
0 
0
Извините, имелся в виду закрывающийся тэг абзаца //
Нравится или не нравится:
0 
0
Ставь тег переноса строки – BR, в уроке написано! Это одинарный тег – его закрывать не надо.
Нравится или не нравится:
0 
0
Отличный урок! Большое спасибо.
Нравится или не нравится:
0 
0
Всё понятно. Спасибо.
Нравится или не нравится:
0 
0
Я Вас приветствую, Андрей! Спасибо огромное за уроки. Прекрасно!!!
Нравится или не нравится:
0 
0
Спасибо! Все доступно. Понравилось.
Нравится или не нравится:
0 
0
Андрюшечка, солнышко, ты даже не представляешь до чего ВОВРЕМЯ ты свалился на мою голову ИМЕННО С ЭТОЙ ТЕМОЙ! Спасибо огромное!
Нравится или не нравится:
0 
0
Почему файл в опере не открывается вообще,а в эксплорере вместо текста пишет «01. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. «?
Нравится или не нравится:
0 
0
Спасибо, Андрей! А я уже собиралась идти на платные курсы веб-дизайна, но хорошо, что вовремя отказалась.
Нравится или не нравится:
0 
0
Спасибо! Кстати, firefоx тоже поддерживает)
Нравится или не нравится:
0 
0
Елена – удалите эти числа, оставьте только текст
Нравится или не нравится:
0 
0
Спасибо огромное,очень интересно и хорошо объяснено!))
Нравится или не нравится:
0 
0
Из первого урога открыл для себя очень хороший тег fixed. Читаю выпуски дальше. До связи.
Нравится или не нравится:
0 
0
Здравствуйте Андрей! Спасибо за урок, был очень интересный!:)
Только остался один вопрос:
Сказки Братьев Гримм
Как выровнять контейнер например по center?Так как align=”middle(top, bottom)”- выравнивает контейнер относительно окружающего текста. А если текста нету?Я поставил контейнер в пустой строке, он остается с лева чтобы я не делал…
Нравится или не нравится:
0 
0
Я контейнер заключила в тег здесь контейнер. Попробуй.
Нравится или не нравится:
0 
0
Упсс!!! А теги в комментариях писать нельзя, да??? В тег DIV заключи контейнер с MARGUEE.
Нравится или не нравится:
0 
0
Здравствуйте Андрей! Огромное спасибо за то что есть такие понятные уроки, они написаны именно для тех кто вообще не имеет понятия что такое HTML. Я правда уже немного с этим знакома, но уроки мне помогли еще лучше понять что это такое и как этим пользоваться. В этом уроке я почерпнула новое и ценное для меня.
Нравится или не нравится:
0 
0
Спасибо! действительно качественная информация!!!
Нравится или не нравится:
0 
0
Спасибо большое!
Нравится или не нравится:
0 
0
На первых пора дается с трудом, но осилим зря что ли 9 лет в армии служил, там тяжелее было, огромное спасибо за уроки, как в первом классе, но приятно!!! Еще моя покойная бабушка говорила , слушай внучек больше не старых, а бывалых, что я сейчас и делаю. Всех тебе благ Андрей и главное здоровья , остальное приложится!
Нравится или не нравится:
0 
0
Этот урок просто супер!!! Всё сделала, фон чёрный, текст белый и т.д. И контейнер с бегающей строкой сделала – у меня получилось так: контейнер чёрный, текст белый, размер контейнера подогнала по размеру шрифта, размер шрифта поставила 7, прокручивание текста – scroll, и другие параметры установила. А надпись в контейнере «Вот и сказочке конец!» – классно!!!
Протестировала в браузерах «Opera», «Google Chrom», «Mozilla FireFox», «Internet Explorer» – всё смотрится хорошо и контейнер тоже без проблем работает во всех браузерах!!! Спасибо за урок!!!
Нравится или не нравится:
0 
0
Молодец.
Нравится или не нравится:
0 
0
Прочитав комментарии, я попробовала сделать вместо текста вставить изображение – ПОЛУЧИЛОСЬ!!!
Нравится или не нравится:
0 
0
Всё получается,так здорово!!! Спасибо,Андрей.
Firefox тоже поддерживает.
Нравится или не нравится:
0 
0
Спасибо! Все получается! Восторга выше крыши!
Нравится или не нравится:
0 
0
Спасибо Андрей! Очень большое спасибо!!!
Нравится или не нравится:
0 
0
Сначала думала не разберусь,а теперь понравилось.Здорово!!!!!!! Спасибо
Нравится или не нравится:
0 
0
А у меня wordpad открыл какую-то галиматью( значки и закорючки) И я опять ничего не сделал !!!Спасибо за внимание. Я Двоечница ! Какая досада!…….
Нравится или не нравится:
0 
0