Как сделать большой шрифт в html. Цвет шрифта HTML
Цвет шрифта на сайте можно задать при помощи HTML-кода. Для этого существует тег font . По определению, тег font служит некой «обёрткой» или «контейнером» для текста, управляя свойствами которого можно изменять оформление текста.
Тег font применяется следующим образом:
Конструктор сайтов "Нубекс"
Самый простой способ, как изменить цвет шрифта в HTML, это использовать атрибут color тега font :
Конструктор сайтов "Нубекс"
Здесь задается синий цвет для слова, обрамленного тегом font .
Но помимо параметра color, тег имеет и другие атрибуты.
Атрибуты тега FONT
Тег font имеет всего три атрибута:
- color - задает цвет текста;
- size - устанавливает размер текста;
- face - задает семейство шрифтов.
Параметр color может быть определен названием цвета (например, “red”, “blue”, “green”) или шестнадцатеричным кодом (например, #fa8e47).
Атрибут size может принимать значения от 1 до 7 (по умолчанию равен 3, что соответствует 13,5 пунктам для шрифта Times New Roman). Другой вариант задания атрибута - “+1” или “-1”. Это означает, что размер будет изменен относительно базового на 1 больше или меньше, соответственно.
Рассмотрим применение этих атрибутов на нашем примере:
Конструктор сайтов "Нубекс"
Мы применили тег font к одному слову, задали для него размер 6, оранжевый цвет и семейство шрифтов “Serif”.
Задание цвета текста при помощи CSS
Если вам нужно применить определенное форматирование (например, изменить цвет текста) к нескольким участкам текста, то более правильно будет воспользоваться CSS-кодом. Для этого существует атрибут color. Рассмотрим способ его применения на нашем примере:
Конструктор сайтов "Нубекс"
Здесь мы задали синий цвет для слова «Конструктор» (размер его, по умолчанию, 100% от базового), зеленый цвет и размер 125% для слова «сайтов», оранжевый цвет и размер 150% для слова «Нубекс».
Для изменения шрифта служит тэг с атрибутом FACE. Можно указывать шрифт по названию (Arial, Tahoma, Verdana) или типу(например, monospace). Желательно перечислить несколько имен шрифта, чтобы избежать ситуации, когда окажется, что требуемый шрифт не установлен у пользователя. Рекомендую "забить" хотя бы один из общепринятых шрифтов (например Arial). Не рекомендую на одной странице применять более 2-3 различных шрифтов, иначе страница будет смотреться аляповато и непрофессионально.
Пример:
Изменение размера шрифта html-страницы
Для изменения размера шрифта используют атрибут SIZE. Чем крупнее шрифт, тем более легким для восприятия становится текст. Однако, мелкий шрифт позволяет уместить в пределах экрана больший объем информации.
Используя данный атрибут с тэгом
Изменять шрифт можно с помощью тэгов и . укрупняет шрифт указанного фрагмента по отношению к предыдущему тексту, а , соответственно, уменьшает.
Меняя размер отдельных букв, можно добиться интересных эффектов. Например, таким образом можно получить буквицу - укрупненную прописную букву начала абзаца.
Пример:
Выбор цвета шрифта html-страницы
Отображение участков текста Вэб-страницы шрифтами разного цвета придает ей привлекательность.
Используя атрибут TEXT в контексте тэга
, можно изменить цвет текста вэб-страницы целиком. Применение же атрибута COLOR с тэгом (обладает более высоким приоритетом) позволяет взаимодействовать на внешний вид отдельного фрагмента текста.Чтобы изменить цвет текста, надо знать наименование цвета, либо его шестнадцатеричный код. Код состоит из символа фунта # и числа, представляющего интенсивность красной, зеленой и синей составляющих цвета. По имени можно сослаться только на 16 стандартных цветов.
Наим-е цвета Код aqua ##00FFFF black ##000000 blue ##0000FF fuchsia ##FF00FF gray ##808080 green ##008000 lime ##00FF00 maroon ##800000 navy ##000080 olive ##808000 purple ##800080 red ##FF0000 silver ##C0C0C0 teal ##008080 white ##FFFFFF yellow ##FFFF00
Качественная верстка веб-сайтов имеет главную цель — сделать информацию на странице максимально читабельной и удобной для восприятия пользователем. И работа с текстом посредством html является основным и базовым навыком, который необходимо иметь при работе с сайтами. В данной статье подробно описано, как изменить размер текста посредством языка веб-разметки.
Форматировать текст при помощи HTML - это очень просто
Каждый, кто хотя бы раз сталкивался с необходимостью создания или редактирования сайтов, первым делом задавал вопрос, каким образом можно отформатировать текст, чтобы он соответствовал желаемым требованиям. Существует множество способов выполнения этой задачи, и проще всего делать это непосредственно в каркасе самого сайта средствами языка разметки. Стоит один раз разобраться, каким образом меняется размер шрифта в html, и в дальнейшем это уже не будет представлять никаких сложностей.
В этом материале мы подробно расскажем о том, каким образом выполняется форматирование шрифтов в html-документах.
Общие принципы редактирования текста на веб-страницах
Для начала требуется разобраться, какие возможности для форматирования текста дает нам html. Существует три основные характеристики шрифта — это гарнитура (характеристика, определяющая внешний вид букв и знаков), цвет и размер. Читабельность любого документа зависит от того, насколько грамотно сочетаются данные характеристики.
Характеристики текста в html-разметке меняются при помощи тегов и атрибутов. Тег — это основная составляющая языка, его главная логическая единица, а атрибут служит для того, чтобы задать конкретное значение для каждого элемента страницы, отмеченного тегом.
Также необходимо помнить о том, что отображение текста может различаться при использовании разных браузеров, поэтому прежде, чем завершить работу над сайтом, необходимо убедиться в корректности отображения информации во всех основных используемых браузерах. К примеру, размер шрифта в html при использовании старых версий Internet Explorer может отличаться по сравнению с новыми версиями.
Тег
Основные теги, которые используются при форматировании текста на веб-странице, — это и .
Парный тег отвечает за все характеристики форматируемого текста, которые задаются при помощи соответствующих атрибутов. Этот тег является наиболее понятным и удобным в использовании при верстке страниц.
Так как нас в первую очередь интересует, как изменить размер шрифта в html, потребуется употребление атрибута size.
Выглядит это таким образом:
Здесь располагается текст
Значение размера шрифта html задается в числовых единицах от 1 (самый маленький) до 7 (самый большой). За среднее значение традиционно принимается 3 (соответствует размеру 13,5 в гарнитуре Times New Roman).
Соответственно, если внести в тело документа следующий код, то, открыв страницу в браузере, будет видно, как изменяется размер текста в зависимости от установленного значения.
Размер шрифта 1 Размер шрифта 2 Размер шрифта 3 Размер шрифта 4 Размер шрифта 5 Размер шрифта 6 Размер шрифта 7
Помимо абсолютных числовых значений могут использоваться, в том числе, и относительные. Для этого также используется данный тег. Размер шрифта html, как указывалось выше, по умолчанию принят за 3, поэтому, отталкиваясь от этого, можно прибавлять или отнимать целые числовые значения, чтобы получить желаемый результат. Вот так это выглядит:
Здесь располагается текст
При указанном значении размер шрифта будет соответствовать значению 6. Можно проверить в браузере, как это работает, и поэкспериментировать с различными комбинациями числовых значений.
При помощи тега можно видоизменять размер и цвет шрифта в html. Для того чтобы изменить цвет, используется атрибут color и шестнадцатеричный код цвета.
Для внесения необходимых изменений атрибуты следуют по порядку друг за другом в теле одного тега , разделять их какими-либо знаками препинания не требуется.
Тег
Этот тег обладает более широким набором возможностей и характеристик, нежели . Он используется, как правило, в связке с CSS для редактирования и стилизации определенных частей документа.
Для этого тега значения задаются посредством атрибута style. Вот так это выглядит в коде:
Здесь располагается текст
Как можно заметить, здесь используется введение CSS-кода (font-size), а размер задается при помощи пунктов (pt, point). За стандартное значение принимается размер в 12pt, изменять который можно, увеличивая или уменьшая на целое число.
Изменения размера шрифта при форматировании заголовков
Зачастую требуется уменьшить или увеличить размер шрифта в html при редактировании заголовков. В данном случае стоит задача не только изменить размер, но и логически выделить определенную часть текста и назначить ее в качестве заглавной для текстового блока.
В таком случае целесообразно пользоваться тегами
- . Тег — это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от до используются для выделения подзаголовков.
— это заголовок первого уровня. В браузере он будет отображаться наиболее крупным, а теги от до используются для выделения подзаголовков.
используются для выделения подзаголовков.
Заголовок первого уровня
Специфические параметры для данного тега задаются посредством CSS — таким образом можно задать конкретное значение размера текста, его цвет и гарнитуру шрифта.
Итак, мы рассмотрели основные способы изменения размера шрифта в html. Этой информации вполне достаточно, чтобы создать аккуратно выглядящую веб-страницу, обладающую хорошей читабельностью.
Для удобства возьмите на заметку следующие рекомендации:
- При верстке не стоит ограничиваться средствами html. Как только освоены основы построения сайта, можно приступать к изучению CSS. Это откроет новые горизонты в создании веб-страниц.
- Нельзя пренебрегать тестированием готового сайта в различных браузерах и на разных платформах. Как уже писалось выше, параметры текста могут существенно отличаться, особенно при использовании устаревших версий браузеров.
- Всегда следует использовать пробелы и табуляцию при написании кода. Это облегчает его читабельность и понимание.
Первым делом хочу немного отвлечься от темы и поговорить о своих примерах кодов, например в предыдущей главе я ни где не изобразил полного кода страницы а показывал только так:
- HTML
- CSS
- введение
- типы документов
- типы стилей
- PHP
- фотошоп
- HTML
- РНР
А сейчас вернемся к нашей главе, для выполнения всех этих функций перечисленных в заглавии служит тег-контейнер
Теперь вернемся к нашей теме.
Для того что бы изменить размер, шрифт или цвет текста отдельного участка в HTML существует тег-контейнер отдельный кусок текста
Начнем по порядку, и научимся изменять цвет текста отдельного участка, для этой цели в тег FONT нужно поместить атрибут COLOR вот так:
color="red" > отдельный кусок текста Значения атрибута color такие-же как и для атрибутов bgcolor text тега body, т.е мы можем их задавать словами по английски(Black, Green, Silver, Lime, Gray, Olive, White, Yellow, Maroon, Navy, Red, Blue, Purple, Teal, Fuchsia, Aqua)или номерами цвета в RGB (#000000- #FFFFFF)
face="Tahoma" > отдельный кусок текста Шрифты служат для того что-бы текст имел более неординарный вид, но есть одна проблема, шрифтов которые есть у вас(посмотреть их можно в C:WINDOWSFonts) может не оказаться у ваших посетителей, вторая проблема шрифтов что некоторые шрифты можно использовать только к кириллице(русскими буквам) или наоборот только с латиницей(английскими буквами), есть конечно и третий тип который подходит и к латинице и кириллице. В нижнем списке я покажу какие шрифты есть стандартными и есть на всех компах а также подходят к любым буквам:
- Arial
- Cosmic Sans
- Courier
- Garamond
- Helvetica
- Verdana
- Tahoma
- Times
- Times New Roman
Из этого кода хотел заметить следующее, что если у вашего посетителя не окажется шрифта Tahoma , то текст будет предоставлен шрифтом Times , а если нет и Times то текст будет Times New Roman. Ну а если и этого шрифта не будет то шрифт по умолчанию браузера.
А теперь перейдем к размерам, изменить размер текста в HTML можно при помощи двух тегов font
и/или BASEFONT
.
Начнем с BASEFONT
, этот тег служит для изменения базового цвета, шрифта и размера текста, на пример:
Этот тег не является контейнером, т.е. обратного тега не имеет. Цвет и шрифт текста задается как в теге FONT
, а вот для изменения размера текста используется атрибут SIZE
с значением от 1 до 7. Этот тег в тексте можно использовать несколько раз:
По умолчанию размер текста = "3", этот размер можно не задавать. В первом примере мы весть текст увеличили на единицу, во второй линии мы его увиличили до "6", а в третей мы опять его вернули к тексту по умолчанию.
Теперь хочу вас круто огорчить, этот тег был введен в версии HTML-4.01, и соответственно поддерживается в браузере только Интернет Експлорер, остальные браузеры его просто игнорируют, Так что лучше этот тег не использовать вообще!!!
А пользоваться только тегом FONT с атрибутом SIZE
он поддерживается почти всеми браузерами. Атрибут SIZE
, так же принимает значения от 1 до 7, но эти размеры могут задаваться и от "-2" до "+4"
текст
текст
текст
текст
текст
текст
текст
Тег FONT как и BASEFONT может содержать несколько атрибутов:
size="5" color="red" fase="Tahoma, Times, Verdana"
>.... текст....
Форматированию текста в HTML в первую очередь следует уделить внимание, так как практически на любой странице большая часть информации представлена в текстовом виде. Кроме этого, изучив эту тему, Вы познакомитесь со значительной частью HTML тегов.
Группу тегов HTML, предназначенных для работы с текстом можно разделить на две основные подгруппы: теги физического форматирования и теги логического форматирования текста .
Теги физического форматирования физически воздействуют на текст - отвечают за выделение, размещение, оформление текста, которое необходимо для его корректного и одинакового отображения в браузерах.
Теги логического форматирования в большей степени несут смысловую нагрузку, и некоторые из них в основном предназначены для удобства работы поисковых систем.
К тегам физического форматирования относятся следующие теги:
Эти теги относятся к группе логического форматирования:
Абзац в HTML. Перенос текста
Важнейшим тегом физического форматирования текста является тег
Который предназначен для разбивки текста на параграфы.
Каждый тег
Создает новый параграф. При этом текст начинается с новой строки, и между параграфами образуется промежуток.
Атрибут align тега
Позволяет позиционировать абзац по горизонтали, размещая его слева (align= "left" ), справа (align= "right" ), располагая по центру (align= "center" ) или выравнивая по ширине (align= "justify" ) окна браузера или родительского элемента.
Текст после тега
также начинается с новой строки. Но тег
осуществляет лишь перенос строк - он не образует промежутка между ними и его можно использовать внутри тега
Тег
"center" > Текст разбит на параграфы.
При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Текст разбит на параграфы.
При просмотре в браузере новый абзац отделяется от предыдущего пустой строкой. Тег
используется для переноса строки.
Заголовки в HTML. Размер текста
Заголовки в HTML представлены шестью тегами
...
. Каждый из них обозначает заголовок определенного уровня (веса или значимости
).
Тегом
выделяют наиболее значимые части документа (тема страницы или статьи ), а текст заключенный в него - самый крупный.
Тегами
и
можно выделить подтемы, крупные разделы - как правило их немного на страницы. Текст в таких заголовках уже не такой крупный, как в заголовках высшего уровня.
Использование заголовков в HTML "облегчает жизнь" не только пользователям в плане удобного и быстрого ориентирования на странице, но и упрощают работу поисковым роботам, позволяя выделить главное и второстепенное, что положительно влияет на оптимизацию страниц сайта.
Теги
...
, как и тег
Имеют атрибут align , позволяющий выравнивать заголовок по горизонтали.
Использование закрывающего тега для всех заголовков HTML, является обязательным условием их применения!
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня - мелкий шрифт!
Заголовок 1-го уровня
Заголовок 2-го уровня
Заголовок 3-го уровня
Заголовок 4-го уровня
Заголовок 5-го уровня
Заголовок 6-го уровня - мелкий шрифт!
Как видно из примера, преобразуя фрагмент текста в заголовок, мы влияем на его размер - увеличиваем или уменьшаем в зависимости от уровня заголовка.
Размер текста продолжение...
Теги и тоже позволяют изменить размер текста: они соответственно увеличивают и уменьшают текущий размера шрифта на одну единицу.
В HTML размер шрифта задается в условных единицах от 1 до 7 . По умолчанию текст имеет средний размер шрифта, относящийся к 3 условной единице.
Теги и предназначены для отображения текста в виде верхнего и нижнего индекса соответственно. При этом размер шрифта уменьшается на единицу.
И наконец рассмотрим тег . Он предназначен не только для изменения размера текста, но и для задания таких его характеристик как цвет и указания семейства шрифтов.
Атрибут size тега задает размер шрифта в условных единицах от 1 до 7 , атрибут color предназначен для задания цвета (Цвет можно задать двумя способами ), и атрибут face определяет семейство шрифтов .
Увеличение и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний....... и Индекс нижний....... в HTML.
Изменим характеристики текущего шрифта "Arial, Helvetica, sans-serif" > при помощи тега font
Увеличение и уменьшение текущего размера шрифта на одну условную единицу.
Индекс верхний....... и Индекс нижний....... в HTML.
Изменим характеристики текущего шрифта при помощи тега font
Тег
Тег
Изучайте CSS и работайте со стилями!
Гарнитура шрифта
По начертанию шрифт может отличаться постановкой - прямой или курсив, и насыщенностью (плотностью ) - светлый и жирный.
По умолчанию в браузере Вы видите светлый текст прямой постановки. Тег позволяет отобразить текст курсивом, а тег сделать его жирным.
Изменим начертание шрифта: его постановку и насыщенность!
Изменим начертание шрифта: его постановку и насыщенность!
Моноширинный шрифт
Многие среды разработки и редакторы исходного текста программ по умолчанию настроены на моноширинные шрифты. Это сделано для удобства работы программистов: улучшается удобочитаемость кода.
Шрифты этого семейства отличаются тем, что все буквы имеют одинаковую ширину .
В HTML несколько тегов отображают текст моноширинным шрифтом.
Один из них - тег физического форматирования текста
Кроме этого, отображает текст в браузере со всеми пробелами между словами (по умолчанию браузеры воспринимают несколько пробелов, следующих друг за другом, как один ).Остальные теги HTML, отображающие текст моноширинным шрифтом, относятся к тегам логического форматирования текста. Другое их назначение в том, что они предоставляют разного рода информацию, для поисковых систем и других программ, о заключенном в них тексте:
Тег
- отображает текст, который является программным кодом;
Тег - обозначает текст, который набирают на клавиатуре или для названия клавиш;
Тег - предназначен для отображения текста, который является результатом, выдаваемым программой или скриптом.
Програмный код:
FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
Програмный код: FOR i=1 TO 20
Названия клавиш: Alt+F1
Результат скрипта: Hello, PHP!
Все пробелы между словами:
Один Два Три - Попробуйте сами!
Цитаты в HTML. Подчеркивание и перечеркивание текста
Тег предназначен для подчеркивания текста, а тег
для его перечеркивания. Это теги физического форматирования текста, и, кроме визуального оформления, никакой смысловой нагрузки они не несут.В каких случаях Вы будете использовать эти теги - решать Вам!
Подчеркнутый и
перечеркнутыйтекст - Все!
Подчеркнутый и перечеркнутый текст - Все!
Оформление цитат
Возможно, в процессе создания сайта, Вам понадобится вставить цитату на страницу.
Цитата - это дословная выдержка текста из какого-либо произведения. Желательно, чтобы цитируемый текст идентифицировался читающим лицом как вставленный. Для этого цитату необходимо выделить/оформить соответствующим образом.
В HTLM для этой цели существует специальный тег -
. Текст, заключенный в этот тег, оформляется следующим образом: сверху и снизу от основного текста образуются промежутки, а слева и справа отступы (примерно по 40 пикселей ).
Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.
Как сказал Г. Ламене:
Наука служит лишь для того, чтобы дать нам понятие о размерах нашего невежества.Несколько логических тегов
Мы не коснулись еще 3-х тегов, относящихся к группе логического форматирования: это теги , и
.Теги и похожи. Первый из них предназначен для обозначения аббревиатуры, второй - акронима.
Акроним - это таже аббревиатура, только произносится он как единое слово, а не побуквенно.
Оба сокращения при просмотре в браузере подчеркнуты пунктирной линией, и к обоим желательно добавлять всплывающую подсказку - расшифровку сокращения (при помощи атрибута title ).
Тег
применяется для заключения текста в кавычки. Этот тег можно использовать при оформлении цитат или при употреблении слов и выражений, которые имеют переносный смысл.
HTML - это аббревиатура - произносится побуквенно.
"Научно-исследовательский институт" > НИИ - это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи
как две капли воды.
HTML - это аббревиатура - произносится побуквенно.
НИИ - это акроним. Акроним применяется как самостоятельное слово.
Близнецы похожи как две капли воды.