Что такое текстовые теги

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

Изменение стилей шрифтов

Изменять стили написания шрифтов в HTML можно далеко не одним способом:

... и ... - выделяют текст полужирным шрифтом.

... и ... - выделяют текст курсивом .

... - выводит текст в верхнем индексе, например E = mc 2 .

... - выводит текст в нижнем индексе, например H 2 SO 4 .

Все эти теги являются встроенными (inline, уровня строки) , то есть не создают переносы строк до и после себя, а располагаются на одной строке. Содержать они могут тоже только встроенные элементы, поэтому их свободно можно вкладывать друг в друга. Самое главное не забывайте о правильной вложенности: тег, открытый раньше - должен быть закрыт позже.

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

Существуют еще теги и , подчеркивающие текст, а также тег , отображающий зачеркнутый текст. Эти теги являются устаревшими в HTML и их, как и атрибут align, возможно скоро перестанут понимать браузеры. Лучше использовать атрибут style, причем его допустимо указывать внутри любых тегов. Общий синтаксис следующий:

<тег style="text-decoration:underline">... - подчеркивает текст.

<тег style="text-decoration:overline">... - надчеркивает текст.

<тег style="text-decoration:line-through">... - зачеркивает текст.

Пример изменения стилей шрифтов

Изменение стилей шрифтов

Жирный шрифт.Курсив.

Жирный курсив.

H2 SO4 - формула серной кислоты написанная курсивом.

Подчеркнутый параграф текста.

Обычный текст,

зачеркнутый жирный.

Результат в браузере

Style - это абсолютно обычный атрибут тегов, но относится он к Каскадным таблицам стилей (CS S). В далеком прошлом все функции по структуризации HTML-страницы в целом и по внешнему представлению ее каждого элемента в отдельности (цвет, форма, положение на странице и т.д.) брал на себя язык HTML. Но потом разработчики языка решили разграничить эти функции и создали CSS. Соответственно многие теги или атрибуты тегов стали устаревшими. есть. Общий синтаксис атрибута style следующий:

<тег style="свойство CSS:значение">...

Тег или что делать, когда нет нужных тегов

Тег .... Этот тег тоже является встроенным (inline, уровня строки) и может содержать любые встроенные теги, но главное не это. Сам по себе , без атрибутов, не добавляет никаких изменений ни тексту, ни тегам находящимся внутри него. А создан он был специально для стилей, то есть, по сути, для атрибута style. Именно благодаря этому атрибуту, а вернее его разным значениям, у появляются те или иные свойства.

Использование тега SPAN

Обычный текст без изменений.

Еще обычный текст.

Подчеркнутый.

Зачеркнутый.

Результат в браузере

Меняем имя (гарнитуру) шрифта

Вот список самых распространенных шрифтов, которые практически наверняка есть на компьютере каждого пользователя:

По умолчанию практически все браузеры используют шрифт "Times New Roman", а чтобы его изменить используется все тот же атрибут style, который можно применить внутри любого тега. Общий синтаксис указания следующий:

<тег style="font-family:имя шрифта, семейство">...

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

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

Пример изменения имени шрифтов

Изменение имени шрифтов

Это шрифт Arial, если его нет, то Verdana, а если

и его нет, то любой другой из sans-serif.

Это Comic Sans MS илилюбой cursive.

Этоопять Arial, Verdana илилюбой sans-serif.

А это Courier или любой monospace.

Результат в браузере

Меняем размер шрифта

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

В CSS есть порядка десяти единиц измерения, но мы с вами рассмотрим только три самых популярных - это пункты (pt), пиксели (px) и проценты (%). Итак:

    pt - Пункты. Один пункт равен 1/72 дюйма, а один дюйм - 2.54см. Следовательно, 1pt = 0,03527778см. Это абсолютная величина, так как размер заданный в пунктах не зависит ни от чего.

    px - Пиксели. Измеряется в пикселях монитора компьютера. Пиксель - это самая маленькая точка на мониторе и она является относительной величиной, так как ее размер зависит от текущего разрешения экрана и размера самого монитора.

    % - Проценты. Высчитывается в процентах, где за 100% берется значение родительского тега, а если оно не указано, то значение в браузере по умолчанию. Это тоже относительная величина, ведь размер шрифта родителя может быть абсолютно разный, да и размер шрифта в браузере пользователи могут свободно менять.

Чтобы указать размер шрифта используется атрибут style и его можно указать внутри любого тега. Общий синтаксис такой:

<тег style="font-size:размер">...

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

Пример изменения размера шрифтов

Изменение размера шрифта

Этот размер шрифта составляет 90% от размера

в браузере по умолчанию.

Этот размер составляет 90% уже от размера в теге BODY.

Размер шрифта заголовка составляет 120% от размера в BODY.

Это опять 90% от размера в браузере по умолчанию.

Размер этого шрифта 15 пунктов.

Результат в браузере

Если для всего параграфа нужен шрифт Arial с размером в 80%, то надо написать так:

Текст параграфа.

Текст параграфа.

Или вообще вот так.

Текст параграфа.

Первые два варианта в принципе верны, то последний вообще с ошибкой, так как, если помните, в одном теге не может быть двух одинаковых атрибутов. А теперь пора вспомнить, что style - не просто атрибут, а атрибут относящийся к CSS:

Текст параграфа.

Гораздо проще. Самое главное не забывать ставить между соседними стилями точку с запятой (;) и брать все это «хозяйство» в двойные кавычки (" "), иначе применится только первый стиль, а остальные браузер проигнорирует.

Цвет шрифта и цвет знакоместа

В языке HTML у некоторых тегов есть специальные атрибуты меняющие цвет, например bgcolor (цвет фона). Но, во-первых, эти атрибуты являются устаревшими (думаю помните, что это значит), а во-вторых, как я уже сказал, они есть не у всех тегов. И вот, допустим, вы захотели изменить цвет фона у параграфа текста. И как вы это будете делать, ведь у тега

Нет такого атрибута? Поэтому, как и в предыдущих уроках, мы будем использовать стили (CSS), то есть универсальный атрибут style, который позволит нам менять цвет там, где мы захотим.

Как можно указывать цвет?

Цвета в HTML (и CSS) можно указывать несколькими способами, я покажу вам самые популярные и распространенные:

    Имя цвета - В HTML имеется большой список цветов с именами и для того, чтобы указать цвет, достаточно написать его имя на английском, например: red, green, blue.

    HEX-код цвета - Абсолютно любой цвет можно получить, смешав в разных пропорциях три базовых цвета - красный, зеленый и синий. HEX-код - это три пары шестнадцатеричных значений отвечающих за количество этих цветов в каждом цвете. Перед кодом цвета необходимо поставить знак решетка (#), например: #FF8C00, #CC3300 и так далее.

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

Как изменить цвет текста?

Чтобы изменить цвет текста в любом элементе HTML-страницы надо указать внутри тега атрибут style. Общий синтаксис следующий:

<тег style="color:имя цвета">... - указание цвета текста по имени.

<тег style="color:#HEX-код">... - указание цвета текста по коду.

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

Пример изменения цвета текста

Изменение цвета текста

Красный текст заголовка

Синий текст параграфа.

Зеленыйкурсив.

Красныйтекст.

Результат в браузере

Как изменить цвет фона?

Цвет фона любого элемента страницы меняется также с помощью атрибута style. Общий синтаксис такой:

<тег style="background:имя цвета">... - указание цвета фона по имени.

<тег style="background:#HEX-код">... - указание цвета фона по коду.

Пример изменения цвета фона

Изменение цвета фона

Заголовок.

Параграф.

Жирныйтекст.

Обычныйтекст.

Результат в браузере

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

Теги выравнивания содержимого теста относительно страницы

Для того, чтобы выровнять содержимое HTML-элемента, необходимо атрибуту style присвоить одно из следующих значений:

    text-align:center - Выравнивание каждой строки по центру элемента, например параграфа.

    text-align:left - Каждая строка вплотную прижимается к левой стороне элемента (это значение по умолчанию).

    text-align:right - Каждая строка прижимается к правой стороне.

    text-align:justify - Выравнивание сразу по левой и правой сторонам элемента. Объясню. Обычно у элемента, например параграфа, одна сторона текста всегда ровная, а другая - «рваная», так как длины строк получаются немного разными. А когда мы используем значение text-align:justify, то каждая строка равномерно распределяется по ширине. В случае необходимости между словами браузер добавляет дополнительные пробелы, а первое и последнее слово строки всегда прижаты к соответствующим сторонам, поэтому получается ровный с обеих сторон блок.

Пример выравнивания содержимого тегов

Выравнивание содержимого тегов

Заголовокпоцентру.

Текстпараграфаприжимаетсявправо.

Параграфпоцентру.

Результат в браузере

Вообще, горизонтальное выравнивание применяется только к блочным тегам и ячейкам таблицы (о них поговорим позже). Хотя, с другой стороны, даже если вы попытаетесь, то не сможете применить его к встроенным (inline).

Теги, выделяюцие цитаты

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

Тег

или выделяем длинные цитаты

Тег используется в HTML для выделения так называемых «длинных цитат», например одного или нескольких параграфов. Этот тег является блочным и может содержать блочные теги, но не может содержать встроенные. Кроме этого он добавляет такие же как у параграфов внешние поля сверху и снизу, но еще добавляет и боковые поля, благодаря чему происходит визуальное выделение цитируемого текста.

Пример использования тега BLOCKQUOTE

Использование тега BLOCKQUOTE

Для чего нужен тег BLOCKQUOTE? Вот что нам об этом говорит сайт Сеодон.ру:

Очень часто тег BLOCKQUOTE используют не по прямому назначению -

выделение цитируемого текста. А только ради боковых отступов, которые

он создает. В принципе, подобное применение этого тега не противоречит

синтаксису HTML, главное чтобы BLOCKQUOTE содержал блочные теги. Но все

же лучше подобным образом его не использовать, так как BLOCKQUOTE

предназначен именно для выделения длинных цитат.

Результат в браузере

Тег или выделяем небольшие цитаты

А вот тег ... используется для обозначения небольших цитат или слов в переносном смысле. Весь текст, который находится между тегов этого элемента, он ставит в кавычки. Кстати, - это самый обычный встроенный (уровня строки) тег, который может содержать только встроенные теги.

Пример выделения цитат

Выделяем цитаты в тексте

Для изучения языка гораздо важнее свободная любознательность,

чем грозная необходимость. Августин Аврелий.

Чему бы ты ни учился, ты учишься для себя. Петроний.

Результат в браузере

Тег
или принудительный обрыв строки

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

Тег
тоже является встроенным (inline) элементом и пусть вас не запутает то, что он осуществляет перенос строки после себя, просто у него функция такая. Кроме этого, у элемента
нет закрывающего тега, то есть он является пустым , потому что не может иметь содержимого.

Пример использования тега BR

Тег BR, обрывстроки

Цель творчества - самоотдача,
А не шумиха, не успех.

Позорно, ничего не знача,
Выть притчей на устах у всех.

Б. Пастернак.

Результат в браузере

Зачем использовать тег
, если можно просто написать текст в нескольких параграфах, он ведь тогда тоже будет указан на разных строках?» Все это так, но не забывайте, что тег

Создает сверху и снизу поля пустого пространства, а тег
этого не делает. Кроме этого параграфы на то и существуют, чтобы в каждом из них содержались осмысленные и законченные выражения, а не куски текста.

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


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

Спецсимволы HTML

С пецсимволы HTML - это условные кодовые обозначения, которые преобразуются браузером в различные текстовые знаки: буквы, цифры, знаки препинания, стрелки и так далее. Например, если мы напишем в HTML-странице вот такой код:

То браузер нам его не покажет, а отобразит в параграфе знак плюс-минус:

Спецсимволы HTML можно указывать двумя способами:

    Код символа - В этом случае ставится амперсанд (&), за ним решетка (#), потом идут цифры и в конце ставится точка с запятой (;), как показано выше.

    Мнемоника - Сначала также идет амперсанд, потом пишется ключевое слово и тоже в конце точка с запятой, например: ©

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

Обратите особое внимание на то, что спецсимволы-мнемоники чувствительны к регистру, то есть © и © - не одно и то же.

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

Для чего нужны спецсимволы HTML?

Спецсимволы HTML используются для совершенно разных целей. Я думаю, вы уже догадались, что их применяют, когда нужно вставить на страницу символ, которого нет в стандартной компьютерной клавиатуре. Но это далеко не все. Кроме этого они указываются, когда кодировка страницы не поддерживает какие-то символы в «готовом» виде (к этому мы еще вернемся).

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

Довольно часто спецсимволы используются для отображения на странице HTML-разметки. И правда, ведь если мы захотим отобразить на странице какой-нибудь тег, то просто так у нас это сделать не получится, так как браузер его скроет, посчитав за разметку. Поэтому придется использовать спецсимволы заменяющие угловые скобки тегов (< и >) и кавычки атрибутов (")

Пример использования спецсимволов HTML

Использование спецсимволов HTML

Тег для создания параграфов.

® - Знак зарегистрированной торговой марки.

При написании статьи лучший вариант - это использование

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

Результат в браузере

Создание горизонтальных линий в HTML

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

Как нарисовать горизонтальную линию?

Для создания горизонтальных линий в HTML существует специальный тег

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

Пример рисования горизонтальных линий в HTML

Рисуем горизонтальные линии

Параграф.

Параграф.

Параграф.

Результат в браузере

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

Как изменить цвет, толщину и ширину горизонтальных линий?

В старых версиях HTML у тега

существовали специальные атрибуты, с помощью которых можно было изменить цвет, толщину и ширину горизонтальных линий. Это color, size и width, соответственно. Но в новых версиях от них отказались в пользу Каскадных таблиц стилей (CSS), поэтому, как вы уже догадались, мы опять будем использовать наш любимый атрибут style. Общий синтаксис такой:

- цвет линии (вернее ее фон).

- толщина линии.

- ширина линии.

- а можно указать сразу все параметры, только не забываем про точку с запятой (;).

Цвет можно указывать по его имени на английском или по HEX-коду цвета, перед которым ставится решетка (#).

В CSS существует около десяти единиц измерения, но ширину линии можно указывать только в пикселях (px) и процентах (%), а толщину вообще только в пикселях. Если вы поставите другие единицы измерения, то это не будет ошибкой, но браузеры их просто проигнорируют.

Если вы указываете размеры в пикселях, то толщина и ширина линии будет зависеть от разрешения монитора, на котором просматривают ваш сайт (чем выше разрешение экрана, тем тоньше и уже линия).

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

. В этом случае размеры родителя берутся за 100%. Например, если мы разместим тег
внутри элемента
, то как бы мы ни изменяли размеры окна браузера или разрешение монитора - ширина линии всегда будет составлять половину ширины блока
.

Пример изменения цвета, толщины и ширины горизонтальных линий.

Меняем цвет, толщину и ширину горизонтальных линий.

Результат в браузере

Изменение положения горизонтальных линий

Когда изменяешь ширину горизонтальной линии, то становится хорошо видно, что браузеры всегда располагают ее по центру. Если вы хотите изменить ее положение, то просто используйте внутри

атрибут style со значениями для выравнивания содержимого тегов .

Как убрать рамку вокруг линии?

По умолчанию браузеры рисуют вокруг линий рамки, которые создают эффект трехмерности. Так вот, когда мы не увеличиваем толщину горизонтальных линий, браузеры нам показывают только эти рамки, так как толщина самой линии составляет 0px.

Чтобы убрать рамку вокруг линии, которая чаще только портит внешний вид, мы снова применим атрибут style. А пишется это так:

Группирование элементов

Группирование элементов HTML-страницы является одним из самых мощных, удобных и одновременно простых инструментов для создания качественного сайта.

Тег

или сгруппированный блок

До сих пор все изученные нами элементы HTML могли содержать только один из типов тегов - либо встроенные (inline, уровня строки), либо блочные (block). А теперь позвольте вам представить тег

...
. Сам он является блочным , но вот содержать может как встроенные, так и блочные теги, ну и конечно же обычный текст. Но это еще не все, в отличие от других блочных тегов -
не добавляет абсолютно никаких внешних полей (отступов) пустого пространства вокруг себя, как это делает, например, тег

Пример использования тега DIV

Использование тега DIV

Менюсайта

Дополнительные разделы

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Параграф.

Результат в браузере

Тег или сгруппированная строка

Тег ... является встроенным (инлайн) элементом, который может содержать только встроенные теги и использоваться внутри строк текста.

Пример использования тега SPAN

Использование тега SPAN

Обычный текст.

Жирный.

Курсив.

Результат в браузере

При группировании элементов важно соблюдать не только синтаксис HTML, но также смысловое и логическое структурирование кода. Например, если у вас есть страница с краткой биографией двух людей, то не надо пихать внутрь одного блока конец биографии первого человека и начало второго. А вот информацию отдельной биографии или ее части вы вполне можете расположить внутри блока, если это необходимо, или вообще их обе заключить в один блок.

Форматирование текста — средства его изменения, такие как выбор начертания шрифта и использование эффектов, позволяющих менять вид текста. В табл. 1 перечислены основные теги, которые применяются для изменения оформления текста.

Табл. 1. Теги для форматирования текста
Код HTML Описание Пример
Текст Жирное начертание текста Текст
Текст Курсивное начертание текста Текст
Текст Верхний индекс e=mc 2
Текст Нижний индекс H 2 O 
Текст
 Текст пишется как есть, включая все пробелы Текст
Текст Курсивный текст Текст
Текст Жирное начертание текста Текст

Любые теги форматирования текста можно использовать совместно друг с другом. Чтобы сделать текст одновременно жирным и курсивным шрифтом используется сочетание тегов и (пример 1). Их порядок в данном случае не важен.

Пример 1. Жирный курсивный текст

Текст

Он словно вырезан из камня, стоек и неподвижен в отличие от его противников. Дух и жизненная сила в нём достигла совершенства. Но вот беда - никто не смеет принять его вызов.

Результат данного примера показан на рис. 1.

Рис. 1. Вид курсивного жирного начертания текста

Использование тегов и сдвигает текст относительно базовой линии и уменьшает размер шрифта (пример 2).

Пример 2. Создание нижнего индекса

Текст

Формула изумруда: Be3 Al2(SiO3)6

Результат данного примера показан на рис. 2.

Рис. 2. Нижний индекс в тексте

Теги и выполняют те же функции, что теги и , но написание последних короче, привычней и удобней.

Следует отметить, что теги и , также как и являются не совсем эквивалентными и заменяемыми. Первый тег — является тегом физической разметки и устанавливает жирный текст, а тег — тегом логической разметки и определяет важность помеченного текста. Такое разделение тегов на логическое и физическое форматирование изначально предназначалось, чтобы сделать HTML универсальным, в том числе не зависящим от устройства вывода информации. Теоретически, если воспользоваться, например, речевым браузером, то текст, оформленный с помощью тегов и , будет отмечен по-разному. Однако получилось так, что в популярных браузерах результат использования этих тегов равнозначен.

Текст в 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кст - создание перечеркнутого текста. Текст будут перечеркнуты горизонтальной линией.
  • текст - отображает текст или изображение в виде «бегущей строки» с текста, расположенного между ними.

    Подсвеченный участок текста;
    - жирный шрифт;
    - курсив, наклонный шрифт;
    - зачеркнутый текст;
    - текст меньшего размера;
    - верхний индекс;
    - нижний индекс;
    - предварительно отформатированный текст;
    - термин;
    - заголовки;
    - короткая внутристрочная цитата;
    - цитата;
    - сноска на название материала;
    - программный код;
    - результат вывода компьютерной программы;
    - клавиатурный ввод;
    - переменная компьютерной программы.

    Каждому из этих тегов посвящена отдельная страница в нашем справочнике. Перейти на нее вы можете нажав по названию тега.

    Теги выделения фрагментов текста

    Тег используется для выделения важных участков текста. Браузеры обычно отображают текст внутри тега жирным шрифтом. - тег логического выделения. Используя его, вы указываете на важность текста в выделенной области.

    Важный фрагмент текста

    Тег используется для акцентирования внимания, "подчеркивания" фрагмента текста. Браузеры обычно отображают текст внутри тега курсивом. - тег логического выделения.

    Акцентированный фрагмент

    Тег используется для подсветки фрагмента текста.

    Подсвеченный фрагмент

    Тег используется для написания текста жирным шрифтом. Тег физического форматирования, не придает выделенным участком логический вес. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.

    Текст жирным шрифтом

    Тег используется для написания текста курсивом. Используйте тег только если характер выделения не подходит под другой тег форматирования текста по смыслу.

    Текст курсивом

    Тег используется для указания некорректности, неактуальности выделенного фрагмента. Текст внутри тега выводится перечеркнутым.

    Перечеркнутый текст

    Тег используется для написания текста шрифтом меньшего размера.

    Текст меньшего размера

    Тег используется для создания текста нижнего индекса.

    Текст нижнего индекса

    Тег используется для создания текста верхнего индекса.

    Текст верхнего индекса

    Тег указывает, что текст внутри должен быть выведен в том формате, в котором он был написан в редакторе: с учетом количества пробелов между словами и сохранением позиции строк.

    Предварительно отформатированный текст

    Теги устанавливающие суть содержимого

    Теги указывают, что содержимое является заголовком (подзаголовком).

    - заголовок наиболее высокого уровня,

    - наименьшего. Заголовки определяют структуру текста HTML документа. Браузера обычно выделяют заголовки размером шрифта, в зависимости от уровня заголовка.

    Заголовок

    Тег указывает, что содержимое является термином. Браузеры обычно выводят содержимое тега курсивом.

    Термин

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

    Короткая цитата

    Тег моноширинным шрифтом.

    Результат вывода компьютерной программы

    Тег указывает, что содержимое является клавиатурным вводом. Браузеры обычно отображают текст внутри тега моноширинным шрифтом.

    Клавиатурный ввод

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

    Переменная компьютерной программы

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

    Этот урок мы посветим форматированию текста в 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).

    Самостоятельно попробуйте разные значения тега текст . И разные значения align . Выберите любой Вам понравившейся.

    Теперь разобьем наш текст на абзацы.

    Тег, который это делает —

    текст абзаца

    .

    Для этого находим начало абзацев и ставим там тег

    , а в конце абзаца закрываем его

    .

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

    У тега

    есть параметр align с такими же значениями, что и у тегов — left, right, center . Его работа абсолютно такая же как и у тега .

    На абзацы и заголовки текст мы разбили. Теперь идем непосредственно по тексту.

    Текст можно сделать жирным. При помощи тега или (кстати, это закрывающиеся теги. Рекомендуется ).

    Курсив — или , подчеркнутый , моноширинный или .

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

    Например:

    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. Честно говоря мне его на практике использовать не приходилось.



    СХОЖИЕ СТАТЬИ

    Сайт о компьютерной технике