Форматирование текста в html|теги html — h2, h3, align, p, b, strong, em, font, br, hr
Доброго времени суток, уважаемые подписчики.
Этот урок мы посветим форматированию текста в html. Рассмотрим, какие теги для этого применяются.
Сразу оговорюсь, что многие из них являются достаточно специфическими, их можно “обойти”, используя каскадные таблицы стилей (css).
Поэтому заострять внимание на них мы не будем. Просто посмотрим их работу, чтобы Вы знали, что такие возможности в языке HTML присутствуют.
Итак, начнем.
Для того чтобы нам было проще работать, скачаем архив lesson2.zip по прямой ссылке: Архив 2 урока
Возьмем из высланного Вам архива файл “Лис и лошадь.doc”. и откроем его с помощью программы word. Там две сказки известных авторов Братья Гримм.
Затем откроем блокнот и сделаем в нем заголовок как в прошлом уроке или просто скопируем из предыдущего урока.
Готово?
Верю, что да.
Теперь вернемся в word, скопируем весь наш текст из файла “сказка.
Сохраняем нашу заготовку под именем lesson2.html и открываем с помощью браузера (например, opera).
Мы видим, что текст идет без заголовков, без абзацев, без отступов.
Вот теперь и займемся непосредственным форматированием текста.
Для выделения заголовков используются теги <h2>текст</h2>, <h3>текст</h3> и т.д. до <H6>текcт</H6>.
Цифры после буквы H в тэге применяются от 1 до 6.
1 – самый крупный заголовок, 6 – самый маленький заголовок.
<h2>Лис и лошадь</h2> <h2>Лис и кошка</h2>
У тега <h2> есть параметр align со значением Left – по левому краю, right – по правому и center – по центру.
Давайте выровняем заголовок по центру. Для этого пропишем:
<h2 align="center">
Аналогично и второй заголовок.
Сохраняем и смотрим в браузер.
Заголовки стали по центру.
Для упрощения работы можно держать открытыми одновременно код страницы в блокноте и браузер.
А после изменений в коде файл сохранять, а в браузере нажать кнопку обновить (или F5).
Самостоятельно попробуйте разные значения тега <H…>текст</H…>. И разные значения align. Выберите любой Вам понравившейся.
Теперь разобьем наш текст на абзацы.
Тег, который это делает – <p>текст абзаца</p>.
Для этого находим начало абзацев и ставим там тег <p>, а в конце абзаца закрываем его </p>.
У тега <p> есть параметр align с такими же значениями, что и у тегов <H…> – left, right, center.
Его работа абсолютно такая же как и у тега <H>.
На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.
Текст можно сделать жирным. При помощи тега <b>или <strong> (кстати, это закрывающиеся теги. Рекомендуется
Курсив – <i> или <em>, подчеркнутый <u>, моноширинный <tt> или <kbd>.
Попробуйте заключить разные участки текста в разные теги. И не забывайте их закрывать.
Например:</p>
<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>
<small> – уменьшает шрифт на 1
<address> – сведения об авторе и последнем обновлении страницы (отображаются курсивом)
<cite> – цитаты, отображаются курсивом
<code> – программный код отображается моноширинным шрифтом
<em> – выделенный текст отображается курсивом
<strong> – выделенный текст отображается жирным шрифтом, рекомендуется вместо <b>
<hr> – горизонтальная линия. У этого тэга есть такие параметры, как:
align=center(left, right)
width=”число” – длина линии по горизонтали, задается в пикселях или в процентах относительно размеров экрана
size=”число” – толщина линии (меньше 100 пикселей, т.
е. если задать параметр size=99, a параметр width=1, то получим вертикальную линию, только с ограниченной высотой)
color=”цвет” -цвет линии
noshade – отменяет рельефность
Давайте отделим наши две сказки линией красного цвета с шириной равной ширине экрана. Для этого перед началом второй сказки напишем:
<hr color="red" >
Поэкспериментируйте с набором и значениями параметров этого тега.
Есть еще один интересный тэг, но поддерживается он только браузером Internet Explorer честно говоря мне его на практике использовать не приходилось.
Тег <marquee> – контейнер бегающей строки с параметрами:
align=”middle(top, bottom)”— выравнивает контейнер относительно окружающего текста.
top – по верхнему тексту, bottom- по нижнему, middle- по середине.
behavior=”scroll(slide, alternate)” – 
bgcolor =”цвет” – фоновый цвет для контейнера.
direction=”left(right)” – задает направление движения текста.
height=”число” – высота контейнера.
hspace=”число” – расстояние от контейнера до текста по горизонтали.
vspace=”число” – расстояние от контейнера до текста по вертикали.
loop=”число” – количество повторений.
width=”число” – ширина контейнера.
scrollmount=”число” – скорость движения текста.
scrolldelay=”число” – время задержки между циклами.
Например в нашей сказке это может выглядеть так:
<marquee align="top" behavior="scroll" bgcolor="blue" direction="left"> Как можете? </marquee>
Как можете?
Вот пожалуй и все про что я хотел вам рассказать. Предлагаю самостоятельно сделать упражнение:
Фоновый цвет страницы сделать черным, цвет текста белым, цвета заголовков красным, внизу сделать подпись курсивом синего цвета.
Можете поэкспериментировать с цветами и подобрать свой вариант. Файл с названиями цветов, которые вы можете использовать, находится в высланном вам архиве.
В следующем уроке мы научимся делать ссылки, рассмотрим какие они бывают, поработаем над вставкой картинок в нашу html страницу, и сделаем картинку ссылкой на любой web-ресурс.
С уважением, Андрей.
E-mail:[email protected]
Проект webformyself.com – основы самостоятельного сайтостроения
С наилучшими пожеланиями, Андрей Бернацкий.
Метки: body, font, html, marquee, форматирование текста в html
Запись опубликована 15.07.2009 в 02:44 и размещена в рубрике Базовый курс. Вы можете следить за обсуждением этой записи с помощью ленты RSS 2.0. Можно оставить комментарий или сделать обратную ссылку с вашего сайта.
Визуальное оформление текста в HTML | Nejalko.ru
Доброго времени суток, друзья!
Вторая часть урока по работе с текстом в HTML посвящена различным эффектам текста, свойствам шрифтов и разделительным полосам.
Первая часть урока находится тут и целиком направлена на знакомство с основными элементами текстовых составляющих html — документов.
Начнем, пожалуй с
наиболее распространенных тегов форматирования текста в html:- Тег полужирного начертания текста —
<strong></strong>
Парные теги, придают <strong>такой</strong> эффект, пропишите теги <strong> в коде нашей странички index.html к какому-либо слову, предложению, абзацу или букве и посмотрите на результат. Естественно, теги работают на ту часть, которая располагается между открывающей и закрывающей частью:
Обратите внимание, если Вы пишите тег <strong> после тега <p>, то закрывать тег </strong> обязательно перед тегом </p>. Иными словами, должна соблюдаться вложенность тегов, если Вы ложите коробку в коробку, то она же не вылазит из стены второй коробки, так и в html, тег внутри тега должен быть целостным:
<p><storng></strong></p> — это правильный синтаксис языка html;<strong><p></strong></p>
Всегда следите за правильностью (грамотностью) написания тегов, так как это скажется на результате работы, а искать в тысячах символов кода ошибки не очень приятно.
- Тег курсивного начертания —
<em></em>
Также парные теги, с их помощью текст приобретает наклонное начертание, называемое курсивом. Выглядит в html-документе это <em>таким</em> образом. На тег курсива действуют те же правила, что и на тег полужирного начертания, кроме того, эти теги можно использовать совместно и тогда получится <em><strong>вот такой эффект</strong></em> полужирное курсивное начертание. Опять же, не забывайте про вложенность тегов и закрывайте их правильно. Можно использовать вплоть до отдельной буквы.
- Тег подчеркивания текста —
<u></u>
Еще одна разновидность тегов оформления текста, позволяет подчеркнуть текст тонкой линией по нижней границе букв.
Выглядит это <u>следующим образом</u>. Также может быть комбинирован с предыдущими тегами в любом сочетании: полужирный-подчеркнутый, курсив-подчеркнутый или все вместе; и использоваться хоть для одной буквы из предложения, только эффект будет не так заметен.
Интересный факт! В интернете подчеркивание текста почти всегда означает гиперссылку, поэтому будьте аккуратны с использованием подчеркиваний, постарайтесь не вводить себя и людей в заблуждение, например, я использую гиперссылки на Nejalko.ru отдельного от остального текста цвета и без подчеркиваний (только изменение цвета по наведению курсора мышки)
- Тег перечеркивания текста —
<s></s>
Довольно занятный эффект для текста, широкое распространение такому эффекту можно найти… в торговле, для обозначения скидок и распродаж, выглядит данный тег <s>.именно так</s>
Комбинируется со всеми предыдущими тегами без проблем, единственное пожелание к Вам, как к будущим сайтостроителям: используйте под этим тегом читаемые шрифты и размеры, иначе из-за полосы не возможно прочитать само слово. А вот тут я для Вас устроил небольшую распродажу:
- Тег создания нижнего индекса —
<sub></sub>
Надеюсь, Вы еще не забыли из школьного курса, как выглядят химические формулы? Так вот, теги нижнего индекса отвечают за создание эффекта подстрочного текста, как циферки в химических формулах. К примеру, формула одного хорошо известного некоторым личностям вещества C2H5OH (кто отгадал формулу, тому желаю дальше формулы и не продвигаться).
В html — коде данная формула выглядит так C<sub>2</sub>H<sub>5</sub>OH. Можно попробовать так и с буквами, например, экономические и бухгалтерские формулы часто имеют нижний индекс из букв, вот двухфакторная модель оценки вероятности банкротства:
Z1= -0,39-1,07*Ктл+5,79*Ккзк — в качестве нижнего индекса и буквы, и цифры
* Теги <sub></sub> могут использоваться для создания сносок и поправок
В общем все ограничивается лишь Вашей фантазией, а она, как известно, иногда вполне себе резиновая.
- Тег создания верхнего индекса —
<sup></sup>
Данные теги могут использоваться для создания собственной таблицы умножения, почему бы нет?
2*2=22=4
2*4=23=8
И тому подобное, принцип понятен, в коде выглядит также, как тег <sub>, вся разница в визуальном эффекте и 1 разной букве:
2*2=2<sup>2</sup>=4.
Кстати, данные теги тоже могут использоваться совместно с другими вышеприведенными, главное помните про правильную вложенность тегов и не пытайтесь придать символу одновременно вид нижнего и верхнего индекса.
Тег форматирования шрифта —
<font></font>Мы изучим данный тег, так сказать, для порядка, потому что использование в работе его весьма неудобно. После изучение курса HTML, обязательно выделите время на изучение базового курса по CSS, вот именно в CSS все атрибуты данного тега и будут находиться, даже более того, что можно сделать в html, но сейчас, в качестве ознакомления, доступные атрибуты тега <font> мы разберем.
Слово «font» в переводе с английского означает «Шрифт», так что все справедливо. Применяется данный тег к любой части текстового контента для придания различных эффектов:
- 1.
<font size=""></font>— задаем размер шрифта текста, находящегося между этими тегами. Размер шрифта устанавливается в абсолютном значении и может колебаться от 1 до 7. В коде это будет выглядеть так:
<font size="5">Привет всем</font>, кому не спится!
А также тем, <font size="2">кому спится</font>
Изначальный стандартный размер всего шрифта в языке html равен «3», поэтому эту цифру можно вообще не прописывать, она уже как-бы есть.
- 2.
<font color=""></font>— задает цвет тексту, заключенному в данных тегах. Цвет может быть прописан, как один из 16 базовых цветов на английском языке, либо в 6-значном значении RGB с «#» перед кодом цвета.
Давайте посмотрим пример:
Слово «красный» будет красным, слово «синий» — синим, а слово «небо» — зеленого цвета.
Теперь посмотрим на код этого «цветопредставления»:
— слово "<font color="red;">красный</font>" будет красным;
— слово "<font color="blue;">синий</font>" — синим;
— а слово "<font color="green;">небо</font>" — зеленого цвета.
Обратите внимание, кавычки перед <font> и после </font> не имеют отношения к тегам, просто в них находятся слова «красный, синий, небо». Да, не спрашивайте меня, почему «небо» зеленым цветом.
- 3.
<font face=""></font>— задает семейство шрифта для текста внутри данных тегов. Сразу совет: использовать в работе лучше всего общепринятые шрифты, так как они обязательно будут у других пользователей и они увидят Ваш сайт именно таким, каким Вы его задумали.
Если использовать редкий шрифт, то браузер читателя, у которого нет такого шрифта будет пытаться подставить другой подходящий шрифт и этим почти 100% нарушит верстку сайта, его дизайн или расположение текстового контента.
Рекомендую использовать такие шрифты: Tahoma, Verdana, Times New Roman, Georgia, Arial, Courier. Они по умолчанию должны быть в операционной системе у любого пользователя, так что с ними все будет хорошо.
Давайте посмотрим на работу атрибута «face» тега <font>:
<font face="Arial">Семейство шрифтов Arial;</font><font face="Tahoma">Семейство шрифтов Tahoma;</font><font face="Verdana">Семейство шрифтов Verdana;</font><font face="Times New Roman">Семейство шрифтов Times New Roman;</font><font face="Georgia">Семейство шрифтов Georgia;</font>
Разница на глаз, иногда, слабо заметна, но когда Вы будете работать с большим объемом текста, наподобие данного урока, заметно будет точно.
Все 3 атрибута тега <font> можно комбинировать в одной записи, для этого не нужно каждый раз открывать новый тег <font>, вот, как это выглядит в коде:
<font face="Arial" color="violet" size="4">Семейство шрифтов Arial;</font>
Если перевести на русский, то все становится понятно, мы задали: <шрифт семейства "Arial" цвета "фиолетовый" размера "4"> к сожалению, русских команд язык html не понимает, вот и пишем на английском.
Не забывайте прописывать все изучаемые по ходу уроков теги в код нашей страницы index.html, сохранять изменения и просматривать результаты — практика очень полезна, на нее приходится 50% успеха в веб-программировании.
Тег разделительной полосы
<hr>Разделительная полоса, как понятно из названия, нужна для отделения одной части html-документа от другой части, иногда полоса служит дополнительным элементом декора в дизайне сайта и органично дополняет его.
Вот так выглядит разделительная полоса красного цвета прописанная мной в коде нашей первой html-страницы «index.html»:
А так она выглядит в исходном коде той же страницы:
Разберем, что в коде написано кроме самого тега разделительной полосы <hr>, то есть разберем атрибуты разделительной полосы в html:
- Атрибут
SIZE=""отвечает за размер полосы по высоте, за толщину разделительной полосы, единицы измерения толщины — пиксели. В нашем примере размер равен 3 пикселям. - Атрибут
COLOR=""уже знакомый нам атрибут, отвечает за цвет разделительной полосы, в данном случае, красный. Цвет можно задавать английским названием или в RGB-диапазоне (красный обозначается #FF0000). - Атрибут
WIDTH=""задает ширину разделительной полосы, ее длину по горизонтали. В примере мы использовали относительное значение «53%», а это значит, что сужение самой html-страницы повлечет уменьшение разделительной полосы, так как размер в процентах отсчитывается от общей ширины страницы.
Ширину полосы можно задать в абсолютных единицах, то есть в пикселях, например, так: width="770px", тогда полоса останется шириной 770 пикселей в любом случае. - Атрибут
ALIGN=""отвечает за выравнивание разделительной полосы по горизонтали, в примере указано выравнивание по левому краю, может быть по центру —align="center"и по правому краю —align="right". - Атрибут
NOSHADEданный атрибут не является обязательным и не имеет числового значения. Если его дописать, то разделительная полоса станет темной, без объема и тени.
Выравнивание текста в параграфе
Теги параграфа <p></p> имеют свои параметры выравнивания, если их не прописывать, то весь текст в параграфах автоматически выравнивается по левому краю, обычно этого хватает для стандартных статей, но в качестве специального оформления может пригодиться и специально заданное выравнивание. Параметры выравнивания параграфа зависят от уже знакомого нам атрибута ALIGN, который, в данном случае, прописывается для тега <p>
В html-коде это выглядит следующим образом:
<p align="center">Текст параграфа выравнивается по центру.
</p>
<p align="right">Параграф выравнивается по правому краю.</p>
<p align="left">Параграф выравнивается по левому краю (автоматическое выравнивание также по левому краю.</p>
<p align="justify">Данный параграф получит параметр выравнивания «по ширине», но это не всегда смотрится к месту, чаще даже мешает, так как обычно появляется неестественный отступ между словами, хотя края таких праграфов смотрятся ровно и аккуратно.</p>
Таким образом, параметр выравнивания параграфа имеет 4 возможных значения:
align="left";align="center";align="right";align="justify".
Попробуйте использовать выравнивание на нашей странице index.
html и обязательно проследите за результатом.
Параметр «align» можно использовать не только для параграфа, но и для заголовков, помните такие теги? В коде это будет выглядеть следующим образом:
<h5 align="right">Заголовок с выравниванием по правому краю</h5>На данном атрибуте заголовков мы, пожалуй, остановимся. Обязательно испробуйте на практике все, рассмотренные сегодня теги, если их слишком много — разделите информацию на 2 подхода, гораздо важнее качественно усвоить информацию, чем быстро ее получить и забыть.
В следующем уроке мы познакомимся с еще одним элементом текста в языке html, а именно со списками в html.
Успехов в изучении html, друзья!
Поделиться в соцсетях
Тег HTML »
В тегах HTML
Раскрытие информации: Ваша поддержка помогает сайту работать! Мы зарабатываем комиссионные за некоторые услуги, которые мы рекомендуем на этой странице. Подробнее
- Элемент
- Узнайте, как шрифты и веб-типографика работают в HTML: руководство для начинающих
- Что делает
HTML-тег? - Элемент используется для выделения слов из окружающего текста путем выделения выделенного текста курсивом без дополнительного выделения выделенных курсивом слов.
- Дисплей
- встроенный
- Использование
- Текст
Содержание
- 1 Пример кода
- 2 против
- 3 и не забывайте italics
- 5 Поддержка браузера для i
Пример кода
Элемент
<i>используется для курсива.
Элемент используется для курсив .
по сравнению с Элемент делает окруженный текст курсивом . Элемент указывает текстовый акцент , который передается как курсивный текст. Так в чем разница? Элемент означает что-то , а элемент не означает вообще ничего, кроме того, что текст должен быть выделен курсивом. Итак, когда вы должны использовать один и когда другой? Жестких правил мало, если они вообще есть, но в целом, если вы хотите выделить текст , вы должны использовать элемент .
С другой стороны, если курсив нужен только для стиля (, например, , латинское типографское сокращение), вы можете предпочесть использовать элемент .
И не забывайте
Элемент определения ( ), который используется для разметки слова или фразы, определенной в окружающем тексте, также придает тексту курсив по умолчанию. Правила использования этого элемента вместо , гораздо проще. Его следует использовать только при разметке определяемого слова.
Полный курсив
Иногда желательно выделить несколько строк текста курсивом. Это может быть краткое введение в содержание, заметка для читателя, «мелкий шрифт» того или иного рода. Как правило, здесь также следует избегать элемента . Элемент по сути является типографским , а встроен в (не блочный). Это означает, что его следует использовать для разметки нескольких слов или фраз в более широком контексте.
Если вы хотите выделить весь абзац курсивом, присвойте ему конкретный class или id и используйте CSS.
Адам Вуд
Адам — технический писатель, специализирующийся на документации и руководствах для разработчиков.
Поддержка браузера i
| Все | Все | Все | Все | Все | Все |
