• Главная
  •  > 
  • Новости
  •  > 
  • С помощью тега i можно. HTML5: старые теги нового назначения

С помощью тега i можно. HTML5: старые теги нового назначения

В html размер шрифта играет важную роль. Он позволяет обратить внимание пользователя на важную информацию, размещенную на странице сайта. Хотя важен не только размер букв, но и их цвет, толщина и даже семейство.

Теги и атрибуты при роботе со шрифтами html

Язык гипертекста обладает большим набором средств для работы со шрифтами. Ведь именно форматирование текста является основной задачей html .

Причиной создания языка HTML стала проблема отображения правил форматирования текста браузерами.


Рассмотрим теги, которые используются для работы со шрифтами в html и их атрибуты. Основным из них является тег . С помощью значений его атрибутов можно задать несколько характеристик шрифта:
  • color – устанавливает цвет текста;
  • size – размер шрифта в условных единицах.

Поддерживается положительное значение атрибута от 1 до 7.

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

Форматируется только тот текст, который расположен между частями парного тега font. Остальной текст отображается стандартным шрифтом, установленным по умолчанию.


Также в html существует ряд парных тегов, задающих лишь одно правило форматирования. К ним относятся:
  • — задает в html жирный шрифт. Тег по действию аналогичный предыдущему;
  • — размер больше установленного по умолчанию;
  • — меньший размер шрифта;
  • — наклонный текст (курсив ). Аналогичный ему тег ;
  • — текст с подчеркиванием;
  • — зачеркнутый;
  • — отображение текста только в нижнем регистре;
  • — в верхнем регистре.

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

Жирный текст

Жирный текст

Больше обычного

Меньше обычного

Курсив

Курсив

С подчеркиванием

Зачеркнутый

Возможности атрибута style

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

1) font-family – свойство устанавливает семейство шрифта. Возможно перечисление нескольких значений.
Изменение шрифта в html на следующее значение произойдет, если предыдущее семейство не установлено в операционной системе пользователя .

Синтаксис написания:

font-family: имя шрифта [, имя шрифта[, ...]]

2) font-size – задается размер от 1 до 7. Это один из основных способов того, как в html можно увеличить шрифт.
Синтаксис написания:

font-size: абсолютный размер | относительный размер | значение | проценты | inherit

Размер шрифта можно также задать:

  • В пикселях;
  • В абсолютном значении (xx-small, x-small, small, medium, large );
  • В процентах;
  • В пунктах (pt ).

Font-size:7

Font-size:24px

Font-size: x-large

Font-size: 200%

Font-size:24pt


3) font-style – устанавливает стиль написания шрифта. Синтаксис:

font-style: normal | italic | oblique | inherit

Значения:

  • normal –нормальное написание;
  • italic – курсив;
  • oblique – шрифт с наклоном вправо;
  • inherit – наследует написание родительского элемента.

Пример того, как поменять шрифт в html с помощью этого свойства:

font-style:inherit

font-style:italic

font-style:normal

font-style:oblique


4) font-variant – переводит все прописные буквы в заглавные. Синтаксис:

font-variant: normal | small-caps | inherit

Пример того, как изменить шрифт в html этим свойством:

font-variant:inherit

font-variant:normal

font-variant:small-caps


5) font-weight – позволяет установить толщину написание текста (насыщенность ). Синтаксис:

font-weight: bold|bolder|lighter|normal|100|200|300|400|500|600|700|800|900

Значения:

  • bold – устанавливает полужирный шрифт html;
  • bolder – жирнее относительно normal;
  • lighter –менее насыщенное относительно normal;
  • normal – нормальное написание;
  • 100-900 – задается толщина шрифта в числовом эквиваленте.

font-weight:bold

font-weight:bolder

font-weight:lighter

font-weight:normal

font-weight:900

font-weight:100

Свойство font и цвет шрифта html

Font является еще одним контейнерным свойством. Внутри себя оно объединило значения нескольких свойств, предназначенных для изменения шрифтов. Синтаксис font :

font: font-size font-family | inherit

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

  • caption – для кнопок;
  • icon – для иконок;
  • menu – меню;
  • message-box –для диалоговых окон;
  • small-caption – для небольших элементов управления;
  • status-bar – шрифт строки состояния.

font:icon

font:caption

font:menu

font:message-box

small-caption

font:status-bar

font:italic 50px bold "Times New Roman", Times, serif


Для того чтобы задать цвет шрифта в html можно использовать свойство color . Оно позволяет устанавливать цвет, как с помощью ключевого слова, так и в формате rgb . А также в виде шестнадцатеричного кода.

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

Блок . Структура простейшей страницы

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

В служебное содержимое, которое располагается внутри тега , входит много различных вещей, но пока нам нужны только две из них. Это тег , задающий название страницы, которое будет видно во вкладке браузера, и тег <meta> , который задает кодировку страницы (она ставится в атрибуте <b>charset </b> и обычно имеет значение <b>utf-8 </b>, подробнее об этом в видео, которое будет ниже на пару абзацев).</p> <p>Кроме того, перед тегом <html> обычно пишется конструкция <b>doctype </b>, которая указывает версию языка HTML, на которой сделан сайт. Актуальная сейчас версия языка имеет номер пять и доктайп для нее должен выглядеть так - <!DOCTYPE html> .</p> <p>Итак, давайте посмотрим на основную структуру страницы (чтобы запустить это пример в браузере - скопируйте его в текстовый файл с расширением <b>.html </b> и откройте в браузере, если у вас проблемы с этим - посмотрите видео под примером):</p> <p> <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Это заголовок тайтл Это основное содержимое страницы.

Как выглядит этот пример в браузере смотрите по данной ссылке .

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

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

Блок . Абзацы

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

Абзац создается с помощью тега

Таким образом:

Это заголовок тайтл

Это абзац.

Это еще один абзац.

И еще один абзац.

Это абзац.

Это еще один абзац.

И еще один абзац.

Блок . Заголовки h1, h2, h3, h4, h5, h6

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

Заголовки создаются с помощью тегов

,

,

,

,

,
. Они имеют разную степень важности. В заголовке h1 следует располагать название всей HTML страницы , в h2 - название блоков страницы, в h3 - название подблоков и так далее.

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

Это заголовок тайтл

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Так код будет выглядеть в браузере:

Заголовок h1

Заголовок h2

Заголовок h3

Заголовок h4

Заголовок h5
Заголовок h6

Это первый абзац.

Это второй абзац.

Это третий абзац.

Блок . Жирный

Вы уже знаете, что заголовки по умолчанию жирные . Однако, можно сделать жирным и обычный текст - достаточно взять его в тег . Смотрите пример:

Это заголовок тайтл

Это обычный текст, а это жирный текст.

Так код будет выглядеть в браузере:

Это обычный текст, а это жирный текст.

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

Блок . Курсив

Кроме жирного можно сделать также и курсив с помощью тега :

Это заголовок тайтл

Это обычный текст, а это курсивный текст.

Так код будет выглядеть в браузере:

Блок . Списки

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

Списки создаются с помощью тега

rustrackers.ru - Бесплатные программы для вашего ПК