Как сделать надпись html
Обновлено: 02.07.2024
С помощью тэгов форматирования вы можете выделять семантически важный текст на страницах, создавать тексты "рукописного начертания", вставлять в HTML документы символы с верхним и нижним индексом, а также увеличивать и уменьшать размер шрифта.
Что такое семантика?
- семантический код напрямую влияет на объем HTML кода. Чем меньше кода тем "легче" документ, а значит веб-страницы быстрей грузятся и меньше требуется оперативной памяти на стороне пользователя. Сайт становиться быстрей и менее затратным.
- компьютеры, экранные ридеры для которых важны теги и их атрибуты, адекватно читают и понимают содержимое веб-страницы.
- семантический код при прочих равных условиях, будет выдаваться выше в результатах выдачи поисковых систем, чем страница с несемантическим кодом.
Жирный текст
Чтобы сделать текст жирным и привлечь к нему внимание мы будем использовать строчный элемент . Есть два тега, с помощью которых можно выделить текст жирным шрифтом: теги и . Важно понимать семантическую разницу между ними.
Тег семантически используется, чтобы придать более важное значение тексту и таким образом является наиболее популярным вариантом для жирного текста. Тег , с другой стороны, семантически означает стилистическое выделение текста, который не всегда является лучшим выбором для текста заслуживающего внимания. Вы должны оценить значимость текста для которого хотите установить жирность и выбрать соответствующий тег. Несмотря на то, что браузеры отображают их совершенно одинаково, поисковые системы могут придавать им различное значение при анализе страницы.
HTML-код с тегами и :
Пример: важный и жирный текст
Курсивный текст
Для курсивного текста, на котором тем самым делается акцент, мы будем использовать строчный элемент . Как и с тегами для жирного текста, имеются два разных тега, которые устанавливают курсивный текст, каждый со своим семантическим смыслом.
Тег применяется чтобы сделать акцент на фрагменте текста — это наиболее популярный вариант для курсива. Другой вариант — это использование тега , который применяется просто для создания курсивного текста.
HTML-код с тегами и :
Пример: акцент и курсив
Теги иТег уменьшает размер шрифта на единицу по сравнению с обычным текстом. В HTML размер шрифта измеряется в условных единицах от 1 до 7, средний размер текста, используемый по умолчанию, принят 3. Таким образом, добавление тега уменьшает текст на одну условную единицу. Тег наоборот увеличивает размер шрифта на единицу по сравнению с обычным текстом.
HTML-код с тегами и :
Пример: уменьшенный и увеличенный шрифт
| Внимание: Это чисто презентационный код, элемент удален в HTML5 и вы не должны больше им пользоваться. Вместо элемента веб - разработчики должны использовать CSS свойства. |
HTML тег
Тег используется для выделения или подсветки текста из-за его актуальности в контексте. Хорошим примером является выделение слова, которое искал пользователь в документе. Обычно в браузерах фоновый цвет текста внутри контейнера выделяется желтым цветом как чернильным маркером.
HTML тег
Тег используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в исправленном тексте документа были сделаны. Браузеры обычно помечают текст в контейнере как перечеркнутый .
HTML тег .
HTML тегТег отображает текст в нижнем индексе. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.Такой текст на практике может быть использован, например для написания различных формул в нижнем индексе .
HTML тег
Тег отображает текст в верхнем индексе. Текст отображается уменьшенным размером и располагается выше, чем базовая линия остальных символов строки. Такой текст на практике может быть использован, например для написания различных формул или сносок в верхнем индексе .
Перевод строк и горизонтальные линии
Тег
(перевод строк)
Как вы уже видели раньше, тег
позволяет логически и физически отделить один абзац текста от другого, но что делать, если внутри абзаца нужно перенести текст на новую строку? Специально для этих целей предназначен одинарный тег
. Одним из видимых с первого взгляда отличий данного тега от
является отсутствие отступов после и перед тегом
. Это позволяет располагать смежные строки текста ближе друг к другу. Возможность самостоятельно определить место переноса может пригодиться при записи стихов либо для отделения различных элементов в документе. Добавьте элемент
в любую строку, где хотите оборвать поток текста и вставить разрыв строки.
Тег (горизонтальная линия)
Горизонтальные линии позволяют разделить длинный формально неограниченный текст на отдельные подразделы. Горизонтальные линии в веб-документе играют такую же роль, как орнаментальные полосы в печатных изданиях. Для вставки горизонтальной линии используется одинарный тег . Данный блочный одинарный тег позволяет вставить горизонтальную черту, ширина которой равна либо всей ширине контейнера, в который вложен тег, либо ширине окна браузера.
Пример: перевод строк и горизонтальные линии
Эти строки отделены друг от друга с помощью абзаца (p):
Это первый абзац.
Это второй абзац.
Эти строки отделены друг от друга с помощью тега br:
Наша Таня громко плачет
Уронила в речку мячик
А теперь вернемся к основной теме. Откройте созданную на прошлом уроке html-страницу в блокноте или в Notepad.
Сейчас в ней написана фраза "Привет всем!", она черного цвета, располагается слева на белом фоне. А если мы хотим, чтобы она была посередине, крупным желтым шрифтом и на синем фоне? Для этого у тегов предусмотрены специальные атрибуты. Проще это объяснить на практике.
Шаг 1. Меняем фон html-страницы и цвет текста
Для этого добавим в наш код, в тег следующие атрибуты - bgcolor="blue" text="yellow". Здесь bgcolor - атрибут, отвечающий за цвет фона страницы, а blue - его значение (в нашем случае - голубой, но можете сделать и красный - red, и зеленый - green, и любой другой). Атрибут text задает цвет текста документа, его значение yellow - желтый.
В уроке 2 вы пробовали самостоятельно создать свою первую, простейшую веб-страницу.
В этом уроке вы научитесь работать с текстом, а именно, выделять текст курсивом, делать текст жирным, подчеркивать, зачеркивать, создавать заголовки для веб-страницы, менять шрифт и его размер и другое.
Я постараюсь вас не грузить многочисленной информацией, покажу лишь основное, с чем вы будете чаще всего сталкиваться. На ранних этапах ознакомления с основами HTML, вам должно этого хватить.
Основные теги для работы с текстом.
- этот тег предназначен для разбивки текста на параграфы в html документе.
- эти теги предназначены для создания заголовка от 1 до 6 уровня в html документе.
- этот тег служит для переноса строки в html документе.
Предлагаю посмотреть пример :
Вот результат примера .
Атрибуты в HTML.
Атрибуты в html – это дополнение к тегу для разметки текста. Атрибуты вставляются вовнутрь тега. На примере вы все увидите:
align="center" > здесь текст
P – это тег параграфа.
align="center" – это атрибут к тегу
с дополнительным правилом.
Я думаю, вы поняли, что такое атрибуты в html.
align: center | left (по умолчанию) | right
align: center | justify | left | right
Итог .
Давайте объединим все примеры вместе и посмотрим результат:
Дополнительные теги для работы с текстом.
Благодаря дополнительным тегам, веб-мастер может придать страничке особый вид, а именно, выделить текст жирным, курсивом, подчеркнуть, перечеркнуть, создать верхний и нижний индекс, указать размер и цвет шрифта, вставить в текст разделительную линию по горизонтали.
- этот тег предназначен для выделения текста или слова жирным начертанием. Или ( ).
- этот тег предназначен для выделения текста или слова курсивом.
- этот тег предназначен для подчеркивания текста или слова.
- текст будет перечеркиваться.
- текст верхнего индекса (х 2 )
- текст для нижнего регистра (Н2О)
- этот тег предназначен для изменения цвета, размера и стиля шрифта в тексте.
- этот тег предназначен для вставки горизонтальной линии в текст.
Предлагаю посмотреть пример :
font: SIZE | COLOR | FACE
Предлагаю посмотреть пример :
HR: width | size | align | noshade | color
Для начала поговорим о заголовках. В предыдущих уроках Вы могли видеть как используется текст. Однако, наряду с ним, в html есть теги, обозначающие заголовки: h1, h2, h3, h4, h5, h6. Они идут в порядке от самого большого, до самого маленького: h1 - самый большой заголовок, h2 - чуть меньше, ну а h6, последний из них, соответственно самый маленький.
Форматирование текста в HTML
Наверное, Вы уже заметили, что если Вы переносите строку и продолжаете печатать текст в коде, то сам текст всё равно идёт в одним абзацем без переноса строки. Для того, чтобы перенести строку надо использовать одиночный тег br в месте принудительного переноса.
Чаще всего (и правильнее) для переноса строки и обозначения абзаца используют тег p (параграф). В случае использования данного тега абзацы у Вас будут разделять отступами друг от друга.
У тега p есть атрибут align, который отвечает за выравнивание параграфа. Может иметь следующие значения:
left - выравнивание по левой стороне
right - выравнивание по правой стороне
center - по центру
jastify - по ширине
| Атрибут align есть и у заголовков (тег h), и у параграфов (тег p). |
Рассмотрим пример кода выравнивания текста по левой стороне, по правой и по центру
Также существует тег center. Он центрирует его содержимое (текст, изображение и тд). Для текста его действие аналогично выравниванию по центру.
Как выделить текст полужирным в html?
strong - стандартное выделение текста жирным.
b - выделение ключевого слова жирным. Вошло в обиход раньше тега strong, поэтому некоторые считают его устаревшим (однако тег используется в HTML5). Наравне со strong воспринимается Поисковыми системами при определении ключевых слов, словосочетаний.
Внимание! Выделение текста данными тегами понимается Поисковой Системой как особо важное.
Будьте внимательны:
1. выделяйте только важные слова и словосочетания
2. важные - это не четверть текста. Старайтесь ограничить применение данного тега.
Рассмотрим пример кода выделения текста жирным
И те, и другие слова будут выделены жирным, однако для Поисковой Системы будет важны слова ключевого слова
Как выделить текст курсивом в html?
i - выделение курсивом. Данным открывающим и закрывающим тегами следует выделять только важную информацию (ключевые слова), так как поисковые системы будут выдавать данные, ориентируясь по ним.
em - стандартное выделение курсивом. Нет ограничений в использовании.
cite - данный вид курсива используется для цитаты, ссылки на материал и авторов.
dfn - для выделения определений и терминов.
| Результат выделения данных тегов будет одинаковым - это выделение курсивом. Однако следует понимать, что данные Вашей страницы будет считывать не только человек, но и Поисковый Робот. Если Вы хотите, чтобы конкретные части текста лучше индексировались (отображалось по запросу в поисковике), то лучше использовать соответствующее для этого выделение - дня цитат cite, для терминов dfn и тд. |
Рассмотрим пример кода c выделением текста курсивом
Как выделить текст подчёркиванием в html?
u - стандартное выделение подчёркиванием (лучше использовать с последними спецификациями html)
ins - так помечаются новые данные (текст, пояснение) вставленные в Ваш документ (либо добавленные, либо взамен старых). Выделяются подчёркиванием
Данные и в первом, и во втором случае будут выделен подчёркиванием.
Как сделать перечёркнутый текст в html?
Перечёркнутым выделяется текст в следующих тегах
del - внесённое исправление.
strike - стандартное перечёркивание.
s - сокращённая запись strike
Как выделить текст в верхнем и нижнем индексах в html?
sub - тег, отображающий текст ниже уровня строки шрифтом меньшего размера.
sup - тег, отображающий текст выше уровня строки шрифтом меньшего размера.
Тег font в html
Для редактирования текста в html также используется тег font. Однако с введением блочной вёрстки и популярностью CSS данный способ быстро начал забываться.
Тег font указывает параметры шрифта (тип шрифта, размер, цвет). У него есть соответствующие атрибуты:
face - название шрифта. Можно приводить несколько названий шрифтов (чере запятую), так как у пользователя, просматривающего Ваш сайт, такого шрифта может НЕ быть по умолчанию или он не будет поддерживать данный язык. Например пользователь из Польши или Китая. Соответственно, если данный шрифт не найден, то используется следующий по списку.
size - активные значения от 1 до 7. Шрифт по молчанию равен 3.
color - цвет текста. Если не задать параметр, то текст будет чёрным.
Можно ли вывести текст в том виде, в котором напечатал(а). Тег PRE
Да, действительно можно облегчить себе жизнь и избавиться от многих отступов, переносов и прочего. Для этого существует тег pre. Количество пробелов, большее одного, в коде приравнивается к одному, однако в pre текст остаётся в таком виде, в котором его ввели.
Для создания абзаца используется тэг Р.
Пример:
Результат:
Замечание. Если в Блокноте при наборе текста вы начали писать текст с новой строки, то в браузере этот текст все равно будет расположен на одной строчке. Чтобы перенести строку внутри одного абзаца требуется поставить тэг
в конце строки.
Пример:
Результат:
Как выровнять текст
Для выравнивания текст у тэга Р есть атрибут ALIGN. Но не достаточно просто написать
. У атрибута должен быть указан параметр. Так атрибут ALIGN имеет следующие параметры:
LEFT – выравнивание текста по левому краю
RIGHT – выравнивание текста по правому краю
CENTER – выравнивание текста по центру
JUSTIFY – выравнивание текста по ширине
Чтобы выровнять название стихотворения по центру необходимо сделать следующую запись:
Пример:
Замечание. Обратите внимание, что при закрытии тэга его атрибуты не пишутся.
Результат:
Использование заголовков
В нашем примере очень хотелось бы, чтобы название и автор стихотворения были бы выделены. Для этого можно использовать заголовки. У заголовка существуют уровни: H1 – самый первый уровень и, соответственно, текст, заключенный в контейнер
всегда начинается с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
также имеется атрибут.
ALIGN определяет выравнивание заголовка. Параметр ALIGN такие же как и у атрибута ALIGN тэга P.
Сделаем в нашем примере название стихотворения заголовком первого уровня и выравнивание по центру, а автора – вторым уровнем и выравнивание по правому краю.
Пример:
Результат:
Использование горизонтальных разделителей
При оформлении текста можно воспользоваться горизонтальными разделителями. Для того чтобы их вставить нужно воспользоваться тэгом .Линия всегда начинается с новой строки, а после нее все элементы отображаются на следующей строке. Этот элемент является одинарным тэгом и не требует закрытия.
У тэга HR есть параметры:
SIZE - устанавливает толщину линии.
Пример:
WIDTH – устанавливает ширину линии в пикселах или процентах.
Пример:
COLOR – задает линии определенный цвет.
Пример:
ALIGN определяет выравнивание линии.
Пример:
Вставим горизонтальный разделитель после стихотворения с толщиной в 2 пикселя и желтым цветом.
Пример:
Замечание. Если для одного тэга мы применяем несколько атрибутов, то достаточно перечислить их через пробел.
Результат:
Как установить шрифт текста
Давайте изменим шрифт стихотворения. Для этого применяют тэг . Но если просто вставить тэг наш текст не изменится. Для изменения шрифта нужно воспользоваться атрибутом FACE.
У этого атрибута есть свои параметры:
Замечание. Обратите внимание, что первым начался тэг , а за ним идет тэг
. А закрываем мы тэги в обратном порядке: сначала тэг
Результат:
Как изменить размер текста
Тэг представляет собой контейнер не только для изменения гарнитуры, но и для установки таких характеристик шрифта как размер и цвет.
Для изменения размера шрифта используется атрибут SIZE, который задает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4"), так и относительной (например, size="+1", size="-1"). В последнем случае размер изменяется относительно текущего.
Изменим размер стихотворения на 5 условных единиц.
Пример:
Результат:
Как задать цвет текста
Для изменения цвета шрифта тэг FONT имеет атрибут COLOR. Значение цвета можно задавать двумя способами. по его названию или по шестнадцатеричному значению.
Зададим для текста цвет FF9900, для этого нужно сделать следующую запись:
Пример:
Пример:
Результат:
Тэги изменения начертания шрифта
Создадим новый документ.
Пример:
Пример:
Пример:
Результат:
Тэг отображает шрифт в виде нижнего индекса. Текст при этом располагается ниже базовой линии остальных символов строки и уменьшенного размера.
Тэг отображает шрифт в виде верхнего индекса. Текст при этом располагается выше базовой линии остальных символов строки и уменьшенного размера.
Читайте также: