Программирование на Python и Objective-C в Mac OS

Программирование на Python и Objective-C под Mac OS и для iPhone / iPod Touch

Работа с текстом html: Работа с текстом | Учебные курсы

On

Работа с текстом html: Работа с текстом | Учебные курсы

By alexxlab

Содержание

УЧЕБНИК HTML для новичков — Работа с текстом

Работа с текстом



Итак, кое-что мы уже знаем. Теперь самая пора наполнить наш сайт содержимым. Я надеюсь, вы уже решили о чем будете писать? Если нет, возьмите какой-нибудь небольшой текст, с заголовками и, открыв наш любимый shablon.html, вставьте его между тегами <BODY> и </BODY>. Можете даже набрать этот текст в программе Word. Обычно я так и делаю. Порою текст приходится неоднократно править, что-то добавлять, исправлять ошибки и неточности. А потом, уже окончательный вариант копирую, и вставляю в Notepad.

Листинг 6. Вставляем текст

<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
  <BODY>
    Вот сюда вставьте текст…
  </BODY>
</HTML>

Я немного подумала, и решила для примера вставить главу из книги Н.В. Гончаренко «Гений в искусстве и науке». Очень уж мне она нравится. Надеюсь, понравится и вам…

Вот как я набрала в Word:

Текст в Word

Что ж.. в Ворде получилось и неплохо. Теперь я это скопирую и помещу в Notepad между <BODY> и </BODY>, вот так:

Листинг 7. Скопированный текст

<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
  <BODY>

Глава 5
ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ

  Все сказанное о гениях мужчинах верно и по отношению к женщинам. «Тогда зачем писать о них отдельно?» — спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину — и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности — в кулинарии (и то не всегда), в изготовлении одежды
(и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми.
  Смысл жизни женщины — мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата.
  Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ееспособностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся
традиций, груз которых несла и во многом еще продолжает нести женщина…
Автор: Н.В. Гончаренко

  </BODY>
</HTML>

И сохраним этот файл, скажем под именем text.html, затем откроем этот файл в окне браузера и что же мы увидим? А увидим мы примерно следующее:

Вот что у нас получилось без тегов форматирования!

Ну и где же, спрашивается, наш текст, любовно разбитый на абзацы? Где табуляция, где выделенные и помещенные в центр заголовки? Почему наш текст расползся по окну браузера, подобно манной каше? Да, должна вас огорчить — ваш (да и мой) браузер не распознает все то, что мы сейчас перечислили.

Но не переживайте! Сейчас к нам на помощь придут теги форматирования! Только позовите!

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

Итак, чтобы нам разбить текст на абзацы, всего-навсего нужно поставить перед каждым абзацем тег <P>. Хочу вас обрадовать, что этот тег может и не иметь закрывающего собрата с косой чертой.

А чтобы выделить отдельные слова, нужно эти слова заключить в контейнер с тегами, каждый тег отвечает за один параметр. Так, например, тег <B> отвечает за жирный текст, <I> — за наклонный и, кроме того существуют специальные теги для заголовков. Всего для заголовков существует 6 уровней: от <h2> до <H6>. Самый крупный — <h2>, самый мелкий — <H6>. Не забывайте только, что у всех этих тегов существуют парные теги, то есть после того слова, который вы хотите выделить нужно не забыть поставить закрывающийся тег с косой чертой. Контейнеры можно вставлять один в другой, только вставлять нужно правильно, как маленькую матрешку — в большую. Например, будет правильно написать:

<В><I>Правильно</I></B>;

а вот так неправильно:

<B><I>Неправильно</B></I>

Чтобы наши заголовки разместить по центру, необходимо добавить атрибут выравнивания <align>:

<align=center> — размещает заголовок по центру окна браузера;

<align=right> — по правой стороне окна;

<align=left> — соответственно по левой. Впрочем, по умолчанию, браузер и так пристроит ваш текст к левому краю.

Теперь откроем наш файл text.hml и внесем необходимые изменения:

Листинг 8. Добавляем теги форматирования

<HTML>
  <HEAD>
    <TITLE></TITLE>
  </HEAD>
  <BODY>
    <h5 align=center>Глава 5</h5>
    <h3 align=center>ГЕНИАЛЬНЫЕ ЖЕНЩИНЫ</h3>
    <P>
Все сказанное о гениях мужчинах верно и по отношению к женщинам. «Тогда зачем писать о них отдельно?» — спросит читатель. Он был бы прав, если бы доказанное в теории стало везде фактом реальной жизни. Но долг мужчин женщинам еще не выплачен. Их тысячелетиями не допускали на мужскую половину — и в клубе, в обществе, даже в доме. Всю силу фантазии, умения и искусства они должны были использовать на слишком узком поле деятельности — в кулинарии (и то не всегда), в изготовлении одежды (и тоже не всегда), в поддержании чистоты жилища, в уходе за мужем и детьми.
    <P>
Смысл жизни женщины — мужчина, он ее судьба, все ее запросы должны замыкаться на том, чтобы обеспечить ему максимум удобств независимо от того, оба ли они свободны или лишены свободы, и вырастить детей. Эта непререкаемая догма утвердилась со времен патриархата.
    <P>
Никто с такой страстью не возносил женщину до небес, не осыпал похвалами ее тонкий вкус, глубину чувств и разнообразие ее способностей, как мужчины. Но никто и не сделал больше, чем мужчины, чтобы не дать этим способностям проявиться. И хотя социальные условия не у всех классов были неблагоприятны, однако почти никогда женщины не имели равенства с мужчиной. Даже социальная эмансипация женщины не стала эмансипацией для мужской психологии, не устранила тысячелетиями складывающихся традиций, груз которых несла и во многом еще продолжает нести женщина.
      <P align=right>
      <I>Автор:</I> <B><I>Н.В. Гончаренко</I></B>
  </BODY>
</HTML>

Сохраним наш документ под именем text2.html, и посмотрим, что же у нас вышло:

Отформатированный текст

Вот кажется то, что и нужно! А теперь попробуем еще некоторые теги:

<BR> — тег перевода строки, непарный тег;

<U> тег подчеркивания</U>;

<STRIKE>тег зачеркивания</STRIKE>;

<BIG>Большой текст</BIG>

<SMALL>Маленький текст</SMALL>

<ADDRESS>этот тег служит для сведения об авторе и/или авторских правах</ADDRESS>.

Рассмотрим эти теги на примере одного моего любимого стихотворения Ирины Лео:

Это не сложно
Это не важно
Просто отважно
В небо шагнуть
И осторожно
Там, где возможно
Темного облака
Край отогнуть.
Стертые лица,
Забытые профили
И многоточий упрямая нить.
Свет разливается
И проявляется
То, что уже никогда не забыть.

Откроем опять shablon.html в блокноте и впишем:

Листинг 9. Стихотворение

  
    
  
  
    <CENTER>
      <U><BIG>СТИХОТВОРЕНИЕ</BIG></U>
    <STRIKE><SMALL>БЕЗ НАЗВАНИЯ</SMALL></STRIKE>
    </CENTER>

    <P align=left>


    Это не сложно <BR>
    Это не важно <BR>
    Просто отважно <BR>
    В небо шагнуть <BR>

    <P align=center>
    И осторожно <BR>
    Там, где возможно <BR>
    Темного облака <BR>
    Край отогнуть. <BR>

    <P align=right>
    Стертые лица, <BR>
    Забытые профили <BR>
    И многоточий упрямая нить. <BR>
    Свет разливается <BR>
    И проявляется <BR>
    То, что уже никогда не забыть. <BR>

    <ADDRESS>Ирина Лео</ADDRESS>
  </BODY>
</HTML>

Сохраним этот файл под именем text3.html, и откроем в окне браузера. Получится примерно следующее

Файл text3.html

В общем, вроде как хотели, так и получилось.

Тренировка!

Введите в форму любой текст, необходимые теги, нажмите на «посмотреть» и любуйтесь на свою работу!



.:Самоучитель HTML:. | Работа с текстом.


  • Жирный шрифт (bold):

    Для управления плотностью шрифта применяются теги:
    <b>текст</b>
    <strong>текст</strong>
    Отличие тэга
    <b> от тэга <strong> в том, что тэг <b> указывает
    браузеру выводить текст жирным шрифтом, а тэг <strong>
    указывает, что текст надо выделить. Как браузер будет выделять
    текст, жирным шрифтом, курсивом или жирным курсивом — зависит от
    конкретного браузера.

    Пример:
    Действие тэга
    <strong>
    Действие тэга <b>


  • Курсив (italic):

    Курсивный шрифт выводится с помощью тэгов:
    <i>текст</i>
    <em>текст</em>

    Пример:
    Курсив

    Примечание: тэг <em> обычно используется для
    выделения слова из текста, и в различных браузерах может работать по
    разному.


  • Подчеркнутый шрифт (underline):

    Выводится с помощью тэга:
    <u>текст</u>

    Пример:
    Подчеркнутый шрифт


  • Перечеркнутый шрифт (strike):

    Выводится с помощью тэга:
    <strike>текст</strike>

    Пример:
    Перечеркнутый шрифт


  • Надстрочный индекс (Superscript):

    Выводится с помощью тэга:
    <sup>текст</sup>
    Пример:
    основной
    текст надстрочный индекс
    23=8


  • Подстрочный индекс (Subscript):

    Выводится с помощью тэга:
    <sub>текст</sub>

    Пример:
    основной текст подстрочный
    индекс
    C2H5OH


  • Имитация стиля печатной машинки (Teletype):

    <tt>текст</tt>

    Пример:
    Teletype


  • Шрифт для вывода цитат (citation):

    <cite>текст</cite>

    Пример:
    основной текст цитата


  • Шрифт для вывода исходного текста программ (code):

    Выводится с помощью тэга:
    <code>текст</code>
    или
    <samp>текст</samp>
    Отображается
    моноширинным шрифтом Courier.

    Пример:
    Обычный шрифт
    Шрифт для текстов
    программ


  • Шрифт для выделения переменной в программе:

    Выводится с помощью тэга:
    <var>текст</var>

    Пример:
    текст программы
    переменная


  • Шрифт для имитации ввода с клавиатуры:

    Выводится с помощью тэга:
    <kbd>текст</kbd>
    Отображается
    моноширинным шрифтом Courier.

    Пример:
    Обычный шрифт
    Шрифт для имитации
    ввода с клавиатуры


  • Заголовки

    Выводятся с помощью тэгов:
    <h2>Самый большой
    заголовок</h2>
    …
    <h5>Самый маленький
    заголовок</h5>

    Пример:

    h3

    h4

    h5

    H5



  • Блок с отступом

    Выводится с помощью тэга:
    <BLOCKQUOTE>текст</BLOCKQUOTE>

    Пример:
    основной текст

    блок текста с отступом



    Тэги управления цветом и размером шрифта:


  • Задание базового шрифта:

    Размер, цвет и стиль шрифта по умолчанию задается с помощью тэга
    <BASEFONT> и не применяется
    к заголовкам
    Если базовый шрифт не задан по умолчанию
    используется шрифт с размером 3
    атрибуты элемента
    <BASEFONT>
    color=(цвет).Цвет шрифта.
    size=(целое число
    от 1 до 7). Размер шрифта
    face=(список разделенных запятыми
    названий шрифтов).
    Пример:
    <BASEFONT SIZE=»2″> Устанавливаем размер
    базового шрифта равным двум.


  • Увеличение размера шрифта:

    Выполняется с помощью тэга:
    <big>текст</big>
    Пример:
    основной
    текст
    Увеличенный текст


  • Уменьшение размера шрифта:

    Выполняется с помощью тэга:
    <small>текст</small>
    Пример:
    основной
    текст
    Уменьшенный текст


  • Управление размером шрифта с помощью тэга <FONT>:

    Размер шрифта меняется с помощью атрибута SIZE тэга <FONT>
    Пример:

    Текст программы:
    <font
    size="1">size=1</font>
    <font
    size="2">size=2</font>
    <font
    size="3">size=3</font>
    <font
    size="4">size=4</font>
    <font
    size="5">size=5</font>
    <font
    size="6">size=6</font>
    <font
    size="7">size=7</font>

    Результат выполнения:
    size=1 size=2 size=3 size=4
    size=5 size=6 size=7

    В атрибуте SIZE можно указывать размер шрифта относительно
    текущего размера SIZE

    Пример:

    Текст программы:
    <font
    size="+1">size +1</font>
    <font size="+2">size
    +2</font>
    <font size="-3">size
    -3</font>

    Результат выполнения:
    size
    +1
    size +2
    size
    -3


  • Управление цветом шрифта с помощью тэга <FONT>:

    Цвет шрифта меняется с помощью атрибута COLOR тэга <FONT>
    Пример:

    Текст программы:
    <FONT
    COLOR="#FF0000">FONT COLOR="#FF0000"</FONT>
    <FONT
    COLOR="red">FONT COLOR="red"</FONT>

    Результат выполнения:
    FONT
    COLOR=»#FF0000″
    FONT
    COLOR=»red»

    Таблица соответствия названий цветов и значений
    RGB.

    Black#000000Green#008000
    Silver#C0C0C0Lime#00FF00
    Gray#808080Olive#808000
    WhiteFFFFFFYellow#FFFF00
    Maroon#800000Navy#000080
    Red#FF0000Blue#0000FF
    Purple#800080Teal#008080
    Fuchsia#FF00FFAqua#00FFFF

  • Задание шрифтов с помощью тэга <FONT>:

    Имя шрифта задается с помощью атрибута FACE тэга <FONT>
    <font face=»имя
    шрифта»></font>
    Задает имя шрифта. Можно
    задавать несколько шрифтов через запятую, в этом случае используется
    первый найденный шрифт.

    Пример:

    Текст программы:
    <font
    face="Impact", "Arial Cyr", "Arial", "MS Sans Serif">
    текст
    будет выведен шрифтом "Impact" при наличии его на вашем
    компьютере.
    </font>
    Результат
    выполнения:
    текст будет выведен шрифтом «Impact» при наличии его на
    вашем компьютере.

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


  • Вывод отформатированного текста:

    Выполняется с помощью тэга <pre>текст</pre>
    Текст, находящийся между
    этими тэгами будет выведен в том же виде, в котором вы его
    напечатали в документе, т.е. со всеми пробелами и
    переносами.
    Пример:

    Текст программы:
    <PRE>

    Отформатированный
		текст

    </PRE>

    Результат выполнения:

    Отформатированный
		текст



  • Комментарии в программе:

    Комментарии вставляются в программу с помощью тэгов:
    <!—комментарии—>
    Для MSIE еще можно применять
    тэги:
    <COMMENT>комментарии</COMMENT>
    Эти тэги
    предназначены для вставки в документ HTML строк комментария, которые
    не отображаются браузером.
    Пример:

    <!--
            многострочный
            комментарий
            -->



  • Переход на следующую строку:

    Принудительный перенос строки выполняется с помощью тэга <br>
    Пример:

    Текст программы:
    Выполняем<br>переход на<BR>следующую
    строку
    Результат
    выполнения:
    Выполняем
    переход на
    следующую строку


  • Запрет переноса:

    Тэги <nobr>текст</nobr> указывает браузеру, что
    вывод текста между ними должен выполняться одной строкой.
    Если
    строка не помещается в окно браузера, появляется горизонтальная
    линейка прокрутки.


  • Управление выравниванием текста:

    Выравнивание блока текста осуществляется с помощью атрибута ALIGN
    тэга <DIV>текст</DIV>
    Атрибут ALIGN может
    принимать значения:
    ALIGN=»LEFT» — выравнивание по левому
    краю
    ALIGN=»RIGHT» — выравнивание по правому
    краю
    ALIGN=»CENTER» — выравнивание по центру
    ALIGN=»JUSTIFY» —
    выравнивание по обеим краям

    Пример:
    Текст программы:
    <DIV ALIGN="CENTER">Текст, выравненный по
    центру</DIV>
    Результат выполнения:

    Текст, выравненный по центру

    Вообще,
    атрибут ALIGN можно применять во многих тэгах, например:
    <P ALIGN=»JUSTIFY»>текст</P> — выравнивание абзаца
    <TD ALIGN=»CENTER»>текст</TD> — выравнивание текста в ячейке
    таблицы
    <h2
    ALIGN=»CENTER»>текст</h2>
    — выравнивание заголовка
    и т.д.
    Отцентрировать блок текста
    можно также и с помощью тэга <CENTER>текст</CENTER>


  • Горизонтальная разделительная линия:

    Вывод горизонтальной линии осуществляется с помощью тэга <hr>
    В этом тэге можно
    применять атрибуты:
    ALIGN=LEFT, CENTER, RIGHT — выравнивание
    линии.
    NOSHADE — линия без тени.
    SIZE — толщина линии в
    пикселях.
    WIDTH — ширина линии.

    Пример:
    Текст программы:
    <HR>
    <HR ALIGN="CENTER" SIZE="10"
    NOSHADE>
    Результат
    выполнения:
    обычная линия:


    линия шириной 10 пикселей, выравненная по центру, шириной 50
    процентов от ширины страницы, без тени:

    • Работа со шрифтами. Работа в Интернете

    Работа со шрифтами

    Рассмотрим подробнее, как можно видоизменять отображение шрифта с помощью не только тегов <B> и <I>, но и других.

    Для определения параметров шрифта, которым будет выводиться текст, служит парный тег <FONT>. Этот тег имеет дополнительные параметры, с помощью которых можно управлять внешним видом шрифта. Один из таких параметров – SIZE – задает размер шрифта. Создадим еще один файл – 2.htm и впишем в него содержимое листинга 8.2.

    Листинг 8.2. Демонстрация шрифтов разных размеров

    <HTML>

    <HEAD>

    <TITLE>Шрифты разных размеров</TITLE>

    </HEAD>

    <BODY>

    <FONT SIZE=»1″>текст размера 1</FONT><BR>

    <FONT SIZE=»2″>текст размера 2</FONT><BR>

    <FONT SIZE=»3″>текст размера 3</FONT><BR>

    <FONT SIZE=»4″>текст размера 4</FONT><BR>

    <FONT SIZE=»5″>текст размера 5</FONT><BR>

    <FONT SIZE=»6″>текст размера 6</FONT><BR>

    <FONT SIZE=»7″>текст размера 7</FONT><BR>


    </BODY>

    </HTML>

    В результате обработки этого HTML-кода браузером получим шрифты размером от 1 до 7, показанные на рис. 8.2. Из приведенного примера также становится ясно, каким образом задаются параметры тега: после его названия пишется параметр, а затем знак =, после которого в кавычках указывается значение этого параметра.

    Рис. 8.2. Пример работы параметра SIZE тега FONT

    Если нужно задать несколько параметров, то они отделяются друг от друга пробелом. Если первую строку после тега <BODY> привести к виду <FONT SIZE=»1″ FACE=»COMIC SANS MS»>текст размера 1</FONT> и то же самое сделать с остальными строками вплоть до шрифта с размером 7, то получится страница другого вида (рис. 8.3).

    Рис. 8.3. Пример одновременного использования двух параметров – FACE и SIZE тега FONT

    В рассмотренном примере использовался шрифт Comic Sans MS, однако на практике при создании веб-страниц чаще всего применяются следующие шрифты: Arial, Courier New, Comic Sans MS, Times New Roman и Verdana. Эти шрифты установлены на абсолютном большинстве компьютеров, поэтому их применение гарантирует, что конечный пользователь будет видеть созданную веб-страничку в том же виде, что и ее автор.

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

    Таблица 8.1. Теги для задания эффектов, применяемых к шрифту

    На рис. 8.4 можно увидеть, как выглядит действие перечисленных в табл. 8.1 тегов.

    Рис. 8.4. Эффекты, применяемые к шрифтам, и теги, задающие их

    Добавим, что можно применять несколько эффектов к одному и тому же тексту. Так, например, код <B><I>Текст</I></B> отобразит слово «Текст» наклонным полужирным шрифтом.







    Данный текст является ознакомительным фрагментом.




    Продолжение на ЛитРес








    HTML шрифты. Работаем со шрифтами в HTML: гарнитура, размер, цвет

    Привет, посетитель сайта ZametkiNaPolyah.ru! Этой записью мы продолжаем рубрику: Верстка сайтов, в которой есть раздел HTML. Мы много говорили о том, что информация на сайте должна быть удобной, доступной, читабельной. Мы рассмотрели несколько HTML тэгов, позволяющих изменять структуру отображения текста HTML страницы в браузере. Теперь мы поговорим про работу со шрифтами в HTML. Замечу, что эта информация в большей степени ознакомительная, так как на данный момент для изменения параметров шрифтов в HTML следует использовать CSS.

    HTML шрифты: работаем со шрифтами в HTML

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

    Что может делать HTML со шрифтами?

    Содержание статьи:

    Давайте сразу скажем, что не стоит путать понятие шрифта и текста, хотя зачастую мы подменяем один термин другим. Чтобы разбираться с тем, что мы можем делать со шрифтами в HTML, давайте дадим определение термину шрифт. Шрифт — графический рисунок начертаний букв и знаков, составляющих единую стилистическую и композиционную систему, набор символов определенного размера и рисунка. В узком типографском смысле шрифтом называется комплект типографских литер, предназначенных для набора текста. Такое определение термину шрифт нам дает Википедия.

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

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

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

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

    HTML тэги для работы со шрифтами

    Сразу отметим, что HTML для работы со шрифтами предлагает нам использовать два тэга: тэг <basefont> и тэг <font>. Первый HTML тэг считается устаревшим и не рекомендован к использованию, так как в дальнейшем он будет удален из стандарта (уже удален и многие браузеры его не поддерживают). Также тэг <basefont> относится к одиночным HTML тэгам. Когда браузер встречает <basefont> он не создает HTML элемент, так как данный тэг служит для изменения характеристик шрифтов всей HTML  страницы.

    Второй тэг <font> используется для изменения характеристик шрифта на определенном участке HTML документа. Тэг <font> относится к парным HTML тэгам, а элемент FONT относится к строчным HTML элементам.

    HTML атрибуты для работы со шрифтами

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

    1. Атрибут face. Данный атрибут позволяет изменить гарнитуру шрифта.
    2. Атрибут color. Изменяет цвет шрифта в HTML документе.
    3. Атрибут size. Позволяет изменить размер шрифта в документе.

    Вот такое вот ограничение в творчестве по работе со шрифтами в HTML. Как мы уже говорили ранее, HTML позволяет изменить три характеристики шрифта: гарнитуру, цвет и размер.

    Изменяем размер шрифта в HTML

    Давайте попрактикуемся в изменение размеров шрифта в HTML. Отметим, что атрибут size может принимать семь значений в виде целых чисел от ноля до семи. Размер шрифта по умолчанию в HTML для любого браузера равен трем. Шрифт, для которого HTML атрибут size имеет значение равное единицы, является самым маленьким, семерки – самым большим. Давайте посмотрим это всё на примере, откройте любой удобный для вас редактор, например бесплатный редактор с подсветкой синтаксиса Notepad++ и создайте документ с кодом:

    <!DOCTYPE html>

    <html lang=»ru-RU»>

    <head>

    <meta charset=»UTF-8″>

    <title>Шрифты в HTML</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

    </head>

    <body>

    <h2>Изменяем размер шрифта в HTML</h2>

    <p><font size=»1″>font size=»1″</font></p>

    <p><font size=»1″>font size=»2″</font></p>

    <p><font size=»1″>font size=»3″</font></p>

    <p><font size=»1″>font size=»4″</font></p>

    <p><font size=»1″>font size=»5″</font></p>

    <p><font size=»1″>font size=»6″</font></p>

    <p><font size=»1″>font size=»7″</font></p>

    </body>

    </html>


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <!DOCTYPE html>

     

    <html lang=»ru-RU»>

     

    <head>

     

    <meta charset=»UTF-8″>

     

    <title>Шрифты в HTML</title>

     

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

     

    </head>

     

    <body>

     

    <h2>Изменяем размер шрифта в HTML</h2>

     

    <p><font size=»1″>font size=»1″</font></p>

     

    <p><font size=»1″>font size=»2″</font></p>

     

    <p><font size=»1″>font size=»3″</font></p>

     

    <p><font size=»1″>font size=»4″</font></p>

     

    <p><font size=»1″>font size=»5″</font></p>

     

    <p><font size=»1″>font size=»6″</font></p>

     

    <p><font size=»1″>font size=»7″</font></p>

     

    </body>

     

    </html>

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

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

    Но атрибуту size мы можем задавать значения не только в абсолютных единицах, но и в относительных. Мы знаем, что HTML шрифт по умолчанию имеет значения атрибута size равным трем, следовательно, мы можем прибавлять и отнимать от тройки числа так, чтобы в результате получалось целое число не больше семи, создайте HTML докуент по примеру ниже, для этих целей можно воспользоваться бесплатным редактором Brackets:

    <!DOCTYPE html>

    <html lang=»ru-RU»>

    <head>

    <meta charset=»UTF-8″>

    <title>Шрифты в HTML</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

    </head>

    <body>

    <h2>Относительные размеры шрифта в HTML</h2>

    <p><font size=»1″>font size=»1″</font></p>

    <p><font size=»-2″>font size=»-2″</font></p>

    <p><font size=»2″>font size=»2″</font></p>

    <p><font size=»-1″>font size=»-1″</font></p>

    <p><font size=»4″>font size=»4″</font></p>

    <p><font size=»+3″>font size=»+3″</font></p>

    <p><font size=»6″>font size=»6″</font></p>

    <p><font size=»7″>font size=»7″</font></p>

    <p><font size=»+4″>font size=»+4</font></p>

    </body>

    </html>


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    <!DOCTYPE html>

     

    <html lang=»ru-RU»>

     

    <head>

     

    <meta charset=»UTF-8″>

     

    <title>Шрифты в HTML</title>

     

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

     

    </head>

     

    <body>

     

    <h2>Относительные размеры шрифта в HTML</h2>

     

    <p><font size=»1″>font size=»1″</font></p>

     

    <p><font size=»-2″>font size=»-2″</font></p>

     

    <p><font size=»2″>font size=»2″</font></p>

     

    <p><font size=»-1″>font size=»-1″</font></p>

     

    <p><font size=»4″>font size=»4″</font></p>

     

    <p><font size=»+3″>font size=»+3″</font></p>

     

    <p><font size=»6″>font size=»6″</font></p>

     

    <p><font size=»7″>font size=»7″</font></p>

     

    <p><font size=»+4″>font size=»+4</font></p>

     

    </body>

     

    </html>

    Этот документ ничем не отличается от предыдущего, мы точно так же использовали HTML абзацы, чтобы осуществлять перенос строки (хотя могли бы и использовать тэг <br>, о котором мы говорили, когда разбирались с пробельными символами в HTML), изменился текст HTML заголовка, но это не главное, главное то, что мы изменили значение атрибута size и в браузере получили вот такую картину:

    Пример изменения размера шрифта в HTML в относительных единицах

    Мы видим, что шрифты в документе идут парами, это сделано специально, чтобы продемонстрировать, что значение size=”1” и size=”-2” дадут шрифт одинакового размера и так далее.

    Изменяем цвет шрифта средствами HTML

    Теперь поработаем с цветом шрифта средствами HTML. Сразу отметим, что HTML не позволяет использовать модель HSV для изменения цвета, поэтому у нас остается только модель RGB, либо использование имени цвета в HTML. Естественно, изменять цвет HTML шрифта мы будем при помощи атрибута color. Откройте удобный для себя редактор, например, JavaScript редактор Sublime Text 3:

    <!DOCTYPE html>

    <html lang=»ru-RU»>

    <head>

    <meta charset=»UTF-8″>

    <title>Шрифты в HTML</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

    </head>

    <body>

    <h2>Изменяем цвет шрифта в HTML</h2>

    <ul>

    <li><font color=»red» size=»5″>color=»red»</font></li>

    <li><font color=»green» size=»5″>color=»green»</font></li>

    <li><font color=»blue» size=»5″>color=»blue»</font></li>

    <li><font color=»#AAA» size=»5″>color=»blue»</font></li>

    <li><font color=»#FF00FF» size=»5″>color=»blue»</font></li>

    </ul>

    </body>

    </html>


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    <!DOCTYPE html>

     

    <html lang=»ru-RU»>

     

    <head>

     

    <meta charset=»UTF-8″>

     

    <title>Шрифты в HTML</title>

     

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

     

    </head>

     

    <body>

     

    <h2>Изменяем цвет шрифта в HTML</h2>

     

    <ul>

     

    <li><font color=»red» size=»5″>color=»red»</font></li>

     

    <li><font color=»green» size=»5″>color=»green»</font></li>

     

    <li><font color=»blue» size=»5″>color=»blue»</font></li>

     

    <li><font color=»#AAA» size=»5″>color=»blue»</font></li>

     

    <li><font color=»#FF00FF» size=»5″>color=»blue»</font></li>

     

    </ul>

     

    </body>

     

    </html>

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

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

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

    Изменяем гарнитуру шрифт в HTML

    И наконец, HTML позволяет нам изменять гарнитуру шрифта при помощи специального атрибута face. Перечислять все доступные гарнитуры нет смысла, а, самое главное, нет возможности. Ниже мы приведем самые распространенные гарнитуры для самых популярных ОС. Отметим, что многие люди, говоря шрифт, имеют ввиду гарнитуру шрифта, в принципе они не далеки от истины, поскольку гарнитура – это самая сложная характеристика шрифта. Создайте документ в любом редакторе, рекомендую вам попробовать IDE NetBeans версии PHP:

    <!DOCTYPE html>

    <html lang=»ru-RU»>

    <head>

    <meta charset=»UTF-8″>

    <title>Шрифты в HTML</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

    </head>

    <body>

    <h2>Изменяем гарнитуру шрифта в HTML</h2>

    <ul>

    <li><font face=»Arial» color=»red» size=»5″>face=»Arial»</font></li>

    <li><font face=»Times New Roman» color=»green» size=»5″>color=»green»</font></li>

    <li><font face=»Verdana» color=»blue» size=»5″>color=»blue»</font></li>

    <li><font face=»Comic Sans MS» color=»#AAA» size=»5″>face=»MS Comic Sans»</font></li>

    <li><font face=»Tahoma» color=»#FF00FF» size=»5″>face=»Tahoma»</font></li>

    <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″>

    face=»Comic Sans MS, Tahoma, Arial»</font></li>

    </ul>

    </body>

    </html>


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    <!DOCTYPE html>

     

    <html lang=»ru-RU»>

     

    <head>

     

    <meta charset=»UTF-8″>

     

    <title>Шрифты в HTML</title>

     

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

     

    </head>

     

    <body>

     

    <h2>Изменяем гарнитуру шрифта в HTML</h2>

     

    <ul>

     

    <li><font face=»Arial» color=»red» size=»5″>face=»Arial»</font></li>

     

    <li><font face=»Times New Roman» color=»green» size=»5″>color=»green»</font></li>

     

    <li><font face=»Verdana» color=»blue» size=»5″>color=»blue»</font></li>

     

    <li><font face=»Comic Sans MS» color=»#AAA» size=»5″>face=»MS Comic Sans»</font></li>

     

    <li><font face=»Tahoma» color=»#FF00FF» size=»5″>face=»Tahoma»</font></li>

     

    <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″>

     

    face=»Comic Sans MS, Tahoma, Arial»</font></li>

     

    </ul>

     

    </body>

     

    </html>

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

    Пример изменения гарнитуры шрифта в HTML

    Обратите внимание на последний элемент списка. В HTML мы можем задать сразу несколько гарнитур для шрифта. Шрифт в документе будет принимать ту гарнитуру, которая указана первой в атрибуте face, если ОС или браузер не могут отобразить шрифт с указанной гарнитурой, то будет попытка отображения шрифта со второй гарнитурой и так далее. Если ни одной из гарнитур нет, то браузер отобразит текст с гарнитурой шрифта, заданной в настройках по умолчанию. И это всё работает до тех пор, пока пользователь не настроит свой браузер так, чтобы он отображал шрифт со своей собственной гарнитурой, не используя те значения, которые указаны в HTML или CSS.

    Приоритет тэгов <basefont> и <font>

    Мы очень подробно рассмотрели тэг <font> и коротко поговорим про <basefont> и приоритеты между этими тэгами. Отметим, что ни один современный браузер уже не понимают тэг <basefont>, поэтому пример, приведенный здесь, будет не информативным и для его работы вам необходимо будет найти старый браузер:

    <!DOCTYPE html>

    <html lang=»ru-RU»>

    <head>

    <meta charset=»UTF-8″>

    <title>Шрифты в HTML</title>

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

    </head>

    <body>

    <basefont face=»Times New Roman» size=»7″ color=»Black»>

    <h2>Приоритет basefont и font</h2>

    <p><ul>

    <li>face=»Times New Roman» size=»1″ color=»Black»</li>

    <li><font face=»Arial» color=»red» size=»5″>

    face=»Arial» color=»red» size=»5″</font></li>

    <li><font face=»Times New Roman» color=»green» size=»5″>

    face=»Times New Roman» color=»green» size=»5″</font></li>

    <li><font face=»Verdana» color=»blue» size=»5″>

    face=»Verdana» color=»blue» size=»5″</font></li>

    <li><font face=»Comic Sans MS» color=»#AAA» size=»5″>

    face=»Comic Sans MS» color=»#AAA» size=»5″</font></li>

    <li><font face=»Tahoma» color=»#FF00FF» size=»5″>

    face=»Tahoma» color=»#FF00FF» size=»5″</font></li>

    <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″>

    face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</font></li>

    </ul></p>

    </body>

    </html>


    1

    2

    3

    4

    5

    6

    7

    8

    9

    10

    11

    12

    13

    14

    15

    16

    17

    18

    19

    20

    21

    22

    23

    24

    25

    26

    27

    28

    29

    30

    31

    32

    33

    34

    35

    36

    37

    38

    39

    40

    41

    42

    43

    44

    45

    46

    47

    48

    49

    50

    51

    52

    53

    <!DOCTYPE html>

     

    <html lang=»ru-RU»>

     

    <head>

     

    <meta charset=»UTF-8″>

     

    <title>Шрифты в HTML</title>

     

    <link rel=»stylesheet» type=»text/css» href=»style.css» />

     

    </head>

     

    <body>

     

    <basefont face=»Times New Roman» size=»7″ color=»Black»>

     

    <h2>Приоритет basefont и font</h2>

     

    <p><ul>

     

    <li>face=»Times New Roman» size=»1″ color=»Black»</li>

     

    <li><font face=»Arial» color=»red» size=»5″>

     

    face=»Arial» color=»red» size=»5″</font></li>

     

    <li><font face=»Times New Roman» color=»green» size=»5″>

     

    face=»Times New Roman» color=»green» size=»5″</font></li>

     

    <li><font face=»Verdana» color=»blue» size=»5″>

     

    face=»Verdana» color=»blue» size=»5″</font></li>

     

    <li><font face=»Comic Sans MS» color=»#AAA» size=»5″>

     

    face=»Comic Sans MS» color=»#AAA» size=»5″</font></li>

     

    <li><font face=»Tahoma» color=»#FF00FF» size=»5″>

     

    face=»Tahoma» color=»#FF00FF» size=»5″</font></li>

     

    <li><font face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″>

     

    face=»Comic Sans MS, Tahoma, Arial» color=»#FF00FF» size=»5″</font></li>

     

    </ul></p>

     

    </body>

     

    </html>

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

    Далее мы приведем список шрифтов (приведем в виде HTML таблицы), которые доступны в самых популярных операционных системах.

    HTML шрифты для Microsoft Windows

    Эти шрифты поддерживают все компьютеры с операционной системой Windows

    Имя гарнитурыИмя гарнитурыИмя гарнитуры
    Andale MonoArialArial Bold
    Arial ItalicArial Bold ItalicArial Black
    Comic Sans MSComic Sans MS BoldCourier New
    Courier New BoldCourier New ItalicCourier New Bold Italic
    GeorgiaGeorgia BoldGeorgia Italic
    Georgia Bold ItalicImpactLucida Console
    Lucida Sans UnicodeMarlettMinion Web
    SymbolTimes New RomanTimes New Roman Bold
    Times New Roman ItalicTimes New Roman Bold ItalicTahoma
    Trebuchet MSTrebuchet MS BoldTrebuchet MS Italic
    Trebuchet MS Bold ItalicVerdanaVerdana Bold
    Verdana ItalicVerdana Bold ItalicWebdings

    HTML шрифты для UNIX систем

    Эти шрифты поддерживают все машины под управлением UNIX подобных ОС:

    Имя гарнитурыИмя гарнитурыИмя гарнитуры
    CharterCleanCourier
    FixedHelveticaLucida
    Lucida brightLucida TypewriterNew Century Schoolbook
    SymbolTerminalTimes
    Utopia

    HTML шрифты для Mac OS

    Шрифты ниже поддерживаются всеми машинами, на которых установлена ОС Mac седьмой версии и выше.

    Имя гарнитурыИмя гарнитурыИмя гарнитуры
    American TypewriterAndale MonoApple Chancery
    ArialArial BlackBrush Script
    BaskervilleBig CaslonComic Sans MS
    CopperplateCourier NewGill Sans
    FuturaHerculanumImpact
    Lucida GrandeMarker FeltOptima
    Trebuchet MSVerdanaWebdings
    PalatinoSymbolTimes
    OsakaPapyrusTimes New Roman
    TextileZapf DingbatsZapfino
    TechnoHoefler TextSkia
    Hoefler Text OrnamentsCapitalsCharcoal
    GadgetSand

    Работа с текстом | Система управления сайтом Business-CMS

    В этой статье: интерфейс текстового редактора и его возможности, вставка и набор текста, форматирование текста и графики, вставка различных элементов в текст.

    Текстовый редактор позволяет вводить текст статьи, добавлять элементы html-разметки текста, ссылки, таблицы и картинки. Для набора аннотаций используется сокращенная панель инструментов редактора, для ввода текста статьи — полная версия. 

    Интерфейс текстового редактора

    (1) — меню текстового редактора. На панели под ним кнопками (2) — (11) продублированы самые востребованные команды. Кроме того, при нажатии правой кнопки мыши появляется всплывающее меню для вставки картинки, ссылки или таблицы.

    Под полем ввода расположена панель (12), на которой отображаются теги и атрибуты HTML — разметки в соответствии с расположением курсора в тексте.

    Если «потянуть» за уголок этой панели   (см. рисунок), то окно редактора изменит размер.

    Кнопки

    (2) — отменть и вернуть изменения. Им соответствуют комбинации клавиш  Ctrl + Z  и  Ctrl + Y.

    (3) — формат. Это выпадающий список всех стилей для текста, картинок и таблиц сайта. Стили определяются в соответствии с утвержденным дизайном.

    (4) — кнопки позволяют сделать выделенный текст жирным, курсивом или подчеркнутым.

     

    (5) — кнопки для выравнивания текста в абзаце: влево, по центру, вправо и по ширине блока. 

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

    (7) — кнопка с выпадаюшим меню для вставки и редактирования таблиц.

    (8) — вставка ссылок.

    (9) — вставки картинок в текст и изменение их размера

    (10) — переключение в полноэкранный режим редактирования статьи. 

    (11) — режим редактирования страницы в виде HTML-разметки.

    Перечисленные кнопки дублируют пункты меню (1). Их функции более подробно рассмотрены далее в описании меню. 

     

    Набор и вставка текста

    Текстовый редактор имеет два режима ввода текста:

    • ввод в режиме форматирования

    • ввод  в виде HTML-разметки.  

    Кнопка «Исходный код» (11)  на панели инструментов редактора осуществляет переключение в режим HTML — разметки.
    Аналогичное действие у команды меню (1) «Инструменты/Исходный код».

    Основныес действия с текстом сгруппированы в разделе меню «Изменить»,  им соответствуют «горячие клавиши»:

    Выделить все — Ctrl + A

    Скопировать — Ctrl + C

    Вставить— Ctrl + V

    Вырезать— Ctrl + X

    а также команды отменть и вернуть изменения — Ctrl + Z / Ctrl + Y. Они дублируются кнопками (2) (см. рисунок выше). 

     

    Если вы скопируете текст из MS Word и вставите его в редактируемую статью, то html-код вашей страницы будет перегружен большим количеством служебной информации, добавляемой MS Word, при этом стили текста могут отображаться некорректно. Чтобы очистить код статьи от служебных тегов MS Word, необходимо использовать специальную команду   «Изменить/Вставить как текст».

    Вставка графики, ссылок и шаблонов

    Пункты раздела меню «Вставить » позволяют добавить в верстку страницы:

    — видео

    — фотографии (9)

    — горизонтальные линии для разделения блоков текста.

    Установите курсор в место вставки и выберите нужный пункт меню. В появившемся окне заполните поля. (Более подробно о вставке картинок)

    Установка ссылок (8) и якорей (ссылка н определенное место веб-страницы) также доступны в этом разделе меню. (Подробнее об установке ссылок)

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

    Вид

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

    Формат

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

     

     

     

    Форматирование текста

    Стили текста включают стиль заголовков,  абзаца статьи, маркированных списков. Чтобы правильно оформить текст выбирайте в  списке «Формат» любой из утвержденных стилей. Стиль присваивается абзацу.

    Иногда требуется выделить несколько слов в статье. С помощью кнопок (4) или команд мею Вы можете присвоить выделенному фрагменту текста различные начертания (жирный, курсив, зачеркнутый, нижний/верхний индекс). 

    Для абзацев можно изменить выравнивание с помощью кнопок на панели (5) (см. рисунок выше)

    Кроме того, можно внести любые изменения в оформление статьи в режиме редактирования текста в виде HTML-разметки.

    Очистить формат

    Если вы вставляете текст из MS Word или др., то стили текста могут отображаться некорректно. Нужно убрать служебные теги MS Word из кода статьи командой «Очистить формат», а затем продолжить форматирование.

    Посмотреть результат форматирования 

    Зафиксируйте изменения  кнопкой «Применить»  (если вы еще работаете со статьей ) или «Сохранить и закрыть». После сохранения перейдите на веб-сайт и обновите страницу (Ctrl+R). 

    Стили для картинок

    При обычной вставке растровой графики  (без присвоения класса CSS) по умолчанию картинка выравнивается влево и текстом не обтекается. Чтобы присвоить стиль кпртинке, нужно ее выделить и выбрать нужный из списка  «Формат».

     

    Таблицы

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

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

    Меню по работе с таблицей появляется такде при нажатии правой кнопки мыши или кнопки (7) (см. рисунок выше)

     

     

     

     


    ДЛЯ УТОЧНЕНИЯ ДЕТАЛЕЙ

    свяжитесь с нами по телефону +7 (804) 333-22-07
    или по электронной почте: 
    [email protected]






    Работа с Текстом (Строкой) » FAQ 1С Все версии » HelpF.pro

    1С 8.x : Как убрать лидирующие нули в номере Документа (вариант2)[8.x]
    Ввести строку, ввод текста[7.x, 8.x]
    Выгрузка результата запроса в текстовый файл с разделителями[8.x, 8.2 УП]
    Заменить в строке пробелы на указанные символы[8.x]
    Заполнить строку символами или текстом указанное количество раз[8.3]
    Как добавить нули к значению или строке в 1С[8.x, 8.2 УП]
    Как из строки Представления Документа получить его Номер и Дату?[7.x, 8.x, 8.2 УП]
    Как обрезать строку до заданой длины или дополнить ее символами, если длина ее меньше заданой?[8.x]
    Как убрать из строки лишние символы?[8.x, 8.2 УП]
    Как убрать лидирующие нули в номере Документа[8.x, 8.2 УП, 8.3]
    Как удалить символ кавычки » в строке?[8.x]
    Как узнать является ли строка числом?[7.x, 8.x]
    Набор функций для работы с разделителями в строке[8.x]
    Получить количество строк в многострочной строке[7.x, 8.x]
    Проверка наличия в строке только цифр. Регулярные выражения[8.3]
    Разбиваем строку «Фамилия Имя Отчество» на «Фамилия И.О.»[8.3]
    Сравнение: Конкатенация, ТекстовыйДокумент, ЗаписьXML[8.x, 8.2 УП]
    Удаление из строки всех нечисловых символов[7.x, 8.x, 8.2 УП]
    Функция «расщепляет» строку на подстроки, используя заданный разделитель[7.x, 8.x]
    Функция выделяет первое слово в предложении[8.x]
    Функция дополняет строку до указанной длины определенным символом — Padl()[8.x, 8.2 УП]
    Функция очищает текст в формате HTML от тегов и возвращает неформатированный текст[8.x, 8.2 УП, 8.3]
    Функция очищает текст в формате HTML от тегов и возвращает неформатированный текст — вариант 2[8.3]
    Функция переводит обычную cтроку в Шестнадцатеричное представление и обратно[8.x, 8.2 УП]
    Функция получает номер последнего указанного Символа в Исходной строке[8.x]
    Функция Получает переменную заключенную в скобки [ ][8.x]
    Функция получить строку на латинском, Транслит[8.x, 8.2 УП]
    Функция преобразования строки вида «ДебиторкаПоКонтрагентам» в «Дебиторка по контрагентам»[7.x]
    Функция преобразует строку к множественному числу (Пример: 3 шкафа)[8.x]
    Функция проверки наличия только русских букв в строке допускаются пробелы и дефис и спецсимволы[8.x]
    Функция проверки, строка написана только русскими и латинскими буквами?[8.x]
    Функция проверяет наличие в строке только цифр[8.x]
    Функция проверяет наличие в строке только цифр учитывая лидирующие нули и пробелы[8.x]
    Функция разбирает строку на подстроки, используя заданный разделитель и возвращает массив[8.x]
    Функция разбора (разложения) строки в массив[8.x]
    Функция разбора (разложения) строки в массив, аналог СтрРазделить[8.2 УП, 8.3]
    Функция, определяющая наличие числа в строке[8.x]

    Не удается найти страницу | Autodesk Knowledge Network

    (* {{l10n_strings.REQUIRED_FIELD}})

    {{l10n_strings.CREATE_NEW_COLLECTION}}*

    {{l10n_strings.ADD_COLLECTION_DESCRIPTION}}

    {{l10n_strings.COLLECTION_DESCRIPTION}}
    {{addToCollection.description.length}}/500

    {{l10n_strings.TAGS}}
    {{$item}}

    {{l10n_strings.PRODUCTS}}

    {{l10n_strings.DRAG_TEXT}}

     

    {{l10n_strings.DRAG_TEXT_HELP}}

    {{l10n_strings.LANGUAGE}}
    {{$select.selected.display}}

    {{article.content_lang.display}}

    {{l10n_strings.AUTHOR}}

     

    {{l10n_strings.AUTHOR_TOOLTIP_TEXT}}

    {{$select.selected.display}}

    {{l10n_strings.CREATE_AND_ADD_TO_COLLECTION_MODAL_BUTTON}}
    {{l10n_strings.CREATE_A_COLLECTION_ERROR}}

    Основы работы с текстом HTML — Изучите веб-разработку

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

    Предварительные требования: Базовое знакомство с HTML, как описано в
    Начало работы с HTML.
    Цель: Узнайте, как разметить базовую страницу текста, чтобы придать ему структуру и
    значение — включая абзацы, заголовки, списки, выделение и цитаты.

    Наиболее структурированный текст состоит из заголовков и абзацев, независимо от того, читаете ли вы рассказ, газету, учебник для колледжа, журнал и т. Д.

    Структурированный контент делает чтение проще и приятнее.

    В HTML каждый абзац должен быть заключен в элемент

    , например:

      
     Я параграф, о да я.

    Каждый заголовок должен быть заключен в элемент заголовка:

      
     Я название истории.

    Существует шесть элементов заголовка:

    ,

    ,

    ,

    ,

    и

    .Каждый элемент представляет различный уровень содержания в документе;

    представляет основной заголовок,

    представляет подзаголовки,

    представляет подзаголовки и т. Д.

    Реализация структурной иерархии

    Например, в этой истории элемент

    представляет заголовок истории, элементы

    представляют заголовок каждой главы, а элементы

    представляют собой подразделы каждой главы:

      
     Дробильный канал 
    


     Крис Миллс 
    


     Глава 1. Темная ночь 
    


     Была темная ночь.Где-то ухнула сова. Дождь обрушился на ... 
    


     Глава 2: Вечное молчание 
    


     Наш главный герой не мог даже шепотом выйти из темной фигуры ... 
    


     Призрак говорит 
    


     Прошло еще несколько часов, как вдруг призрак резко выпрямился и воскликнул: «Пожалуйста, помилуй мою душу!»

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

    • Предпочтительно использовать по одному

      на страницу — это заголовок верхнего уровня, а все остальные находятся под ним в иерархии.

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

      для представления подзаголовков, за которыми следуют элементы

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

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

    Зачем нужна структура?

    Чтобы ответить на этот вопрос, давайте взглянем на text-start.html — отправную точку нашего рабочего примера для этой статьи (хороший рецепт хумуса).Вы должны сохранить копию этого файла на вашем локальном компьютере, так как он вам понадобится позже для упражнений. В настоящее время тело этого документа содержит несколько частей. Они никоим образом не размечены, но разделены разрывом строки (нажатие Enter / Return для перехода на следующую строку).

    Однако, когда вы откроете документ в браузере, вы увидите, что текст выглядит как большой кусок!

    Это связано с тем, что нет элементов, определяющих структуру содержимого, поэтому браузер не знает, что такое заголовок, а что — абзац.Кроме того:

    • Пользователи, просматривающие веб-страницу, склонны быстро сканировать в поисках релевантного контента, часто для начала просто читая заголовки. (Обычно мы проводим очень мало времени на веб-странице.) Если они не увидят ничего полезного в течение нескольких секунд, они, скорее всего, расстроятся и уйдут в другое место.
    • Поисковые системы, индексирующие вашу страницу, рассматривают содержание заголовков как важные ключевые слова, влияющие на поисковый рейтинг страницы. Без заголовков ваша страница будет плохо работать с точки зрения SEO (поисковой оптимизации).
    • Слабовидящие люди часто не читают веб-страницы; вместо этого они их слушают. Это делается с помощью программного обеспечения, называемого программой чтения с экрана. Это программное обеспечение предоставляет способы получить быстрый доступ к заданному текстовому контенту. Среди различных используемых методов они обеспечивают схему документа, зачитывая заголовки, что позволяет пользователям быстро находить нужную информацию. Если заголовки недоступны, они будут вынуждены прослушать весь документ, прочитанный вслух.
    • Чтобы стилизовать контент с помощью CSS или заставить его делать интересные вещи с помощью JavaScript, вам нужны элементы, обертывающие соответствующий контент, чтобы CSS / JavaScript могли эффективно нацеливать его.

    Следовательно, нам нужно дать нашему контенту структурную разметку.

    Активное обучение: создание структуры контента

    Давайте сразу перейдем к живому примеру. В приведенном ниже примере добавьте элементы к исходному тексту в поле Input , чтобы он отображался как заголовок и два абзаца в поле Output .

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

      
     Прямой вывод 
    


    

    


     Редактируемый код 
    

     Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции). 
    




    
  
  

    
      
      html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

тело {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}
  
      var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.значение = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } еще {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '
     Мой рассказ 
     \ n 
     Я статистик, меня зовут Триш.
     \ n 
     Мои ноги из картона, и я женат на рыбе. 
     ';
var solutionEntry = htmlSolution;

textarea.addEventListener ('ввод', updateCode);
window.addEventListener ('загрузка', updateCode);




textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault ();
    insertAtCaret ('\ t');
  }

  if (e.keyCode === 27) {
    textarea.blur ();
  }
};

function insertAtCaret (text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.значение) .substring (0, caretPos);
  var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length);
  textarea.value = лицевая сторона + текст + обратная сторона;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus ();
  textarea.scrollTop = scrollPos;
}



textarea.onkeyup = function () {
  
  
  if (solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } еще {
    solutionEntry = textarea.value;
  }

  updateCode ();
};

    Зачем нужна семантика?

    На семантику полагаются повсюду вокруг нас — мы полагаемся на предыдущий опыт, чтобы сказать нам, какова функция повседневного объекта; когда мы что-то видим, мы знаем, какова будет его функция.Так, например, мы ожидаем, что красный светофор будет означать «стоп», а зеленый светофор — «поехать». Если применить неправильную семантику, все может очень быстро усложниться. (В каких странах красный цвет означает «вперед»? Надеемся, что нет.)

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

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

      
     Это заголовок верхнего уровня

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

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

       Это заголовок верхнего уровня?

    Это элемент .У него нет семантики. Вы используете его для обертывания содержимого, когда хотите применить к нему CSS (или что-то сделать с ним с помощью JavaScript), не придавая ему никакого дополнительного значения. (Вы узнаете больше об этом позже в курсе.) Мы применили к нему некоторый CSS, чтобы он выглядел как заголовок верхнего уровня, но поскольку он не имеет семантического значения, он не получит никаких дополнительных преимущества, описанные выше. Рекомендуется использовать соответствующий элемент HTML для работы.

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

    Неупорядоченный

    Неупорядоченные списки используются для разметки списков элементов, для которых порядок элементов не имеет значения. Возьмем для примера список покупок:

     молоко
яйца
хлеб
хумус

    Каждый неупорядоченный список начинается с элемента

      , который охватывает все элементы списка:

        
        
молоко
яйца
хлеб
хумус

      Последний шаг — обернуть каждый элемент списка в элемент

    • (элемент списка):

        
        
  
      •  молоко 
        • 
  
      •  яйца 
        • 
  
      •  хлеб 
        • 
  
      •  хумус 
        •
      Активное обучение: разметка неупорядоченного списка

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

        
       Прямой вывод 
      


      

      


       Редактируемый код 
      

       Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции). 
      




      
  
  

      
        
        html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0.7рем;
  ширина: 98%;
}

тело {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}
  
        var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.value = код;
  userEntry = textarea.ценить;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } еще {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '
         \ n 
      •  молоко 
        •  \ n 
      •  яйца 
        •  \ n 
      •  хлеб 
        •  \ n 
      •  хумус 
        •  \ n < / ul> ';
var solutionEntry = htmlSolution;

textarea.addEventListener ('ввод', updateCode);
window.addEventListener ('загрузка', updateCode);




textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault ();
    insertAtCaret ('\ t');
  }

  if (e.keyCode === 27) {
    textarea.blur ();
  }
};

function insertAtCaret (text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value) .substring (0, caretPos);
  var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.длина);
  textarea.value = лицевая сторона + текст + обратная сторона;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus ();
  textarea.scrollTop = scrollPos;
}



textarea.onkeyup = function () {
  
  
  if (solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } еще {
    solutionEntry = textarea.value;
  }

  updateCode ();
};

      Упорядоченный

      Упорядоченные списки — это списки, в которых порядок элементов имеет значение .Возьмем для примера набор направлений:

       Ехать до конца дороги
Поверни направо
Двигайтесь прямо через первые две кольцевые развязки
На третьей кольцевой развязке поверните налево
Школа будет справа от вас, 300 метров вверх по дороге.

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

        , а не

          :

            
            
  
          1.  Двигайтесь до конца дороги. 
            2. 
  
          2.  Поверните направо 
            3. 
  
          3.  Двигайтесь прямо через первые две перекрестки с круговым движением. 
            4. 
  
          4.  На третьей кольцевой развязке поверните налево. 
            5. 
  
          5.  Школа будет справа от вас, в 300 метрах вверх по дороге. 
            6.
          Активное обучение: разметка упорядоченного списка

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

            
           Прямой вывод 
          


          

          


           Редактируемый код 
          

           Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции). 
          




          
  
  

          
            
            html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

тело {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}
  
            var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.значение = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } еще {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '
             \ n 
          1.  Двигайтесь до конца дороги 
            2.  \ n 
          2.  Поверните направо 
            3.  \ n 
          3.  Двигайтесь прямо через первые две кольцевые развязки. 
            4.  \ n 
          4.  На третьем круговом перекрестке поверните налево. 
            5.  \ n 
          5.  Школа будет справа от вас, через 300 метров вверх по дороге 
            6.  \ n 
           ';
var solutionEntry = htmlSolution;

textarea.addEventListener ('ввод', updateCode);
window.addEventListener ('загрузка', updateCode);




textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault ();
    insertAtCaret ('\ t');
  }

  if (e.keyCode === 27) {
    textarea.blur ();
  }
};

function insertAtCaret (text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value) .substring (0, caretPos);
  var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.длина);
  textarea.value = лицевая сторона + текст + обратная сторона;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus ();
  textarea.scrollTop = scrollPos;
}



textarea.onkeyup = function () {
  
  
  if (solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } еще {
    solutionEntry = textarea.value;
  }

  updateCode ();
};

          Активное обучение: разметка нашей страницы рецептов

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

            
           Прямой вывод 
          


          

          


           Редактируемый код 
          

           Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции).
          




          
  
  

          
            
            html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

тело {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}
  
            var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.значение = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  if (solution.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } еще {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '
           Рецепт быстрого приготовления хумуса 
           \ n \ n 
           Этот рецепт позволяет приготовить быстрый вкусный хумус без каких-либо проблем.Он был адаптирован из ряда различных рецептов, которые я читал за многие годы. 
           \ n \ n 
           Хумус - восхитительная густая паста, которая широко используется в греческих и ближневосточных блюдах. Очень вкусно с салатом, мясом на гриле и хлебом питта. 
           \ n \ n 
           Ингредиенты 
           \ n \ n 
             \ n 
          •  1 банка (400 г) нута ( бобы гарбанзо) 
            •  \ n 
          •  175 г тахини 
            •  \ n 
          •  6 сушеных помидоров 
            •  \ n 
          •  Половина красного перца 
            •  \ n 
          •  A щепотка кайенского перца 
            •  \ n 
          •  1 зубчик чеснока 
            •  \ n 
          •  немного оливкового масла 
            •  \ n 
           \ n \ n 
           Инструкции 
          < / h3> \ n \ n 
             \ n 
          1.  Снимите кожицу с чеснока и крупно нарежьте.
            2.  \ n 
          2.  Удалите из перца все семена и стебли и крупно нарежьте. 
            3.  \ n 
          3.  Добавьте все ингредиенты в кухонный комбайн. 
            4.  \ n 
          4.  Измельчите все ингредиенты в пасту. 
            5.  \ n 
          5.  Если вы хотите получить грубый «кусочек» хумуса, измельчите его в течение короткого времени. 
            6.  \ n 
          6.  Если вы хотите получить гладкий хумус, обрабатывать его дольше. 
            7.  \ n 
           \ n \ n 
           Чтобы получить другой вкус, вы можете попробовать смешать небольшую порцию лимона и кориандра, перца чили, лайма и чипотле, хариссы и мята, или шпинат и сыр фета.Поэкспериментируйте и посмотрите, что вам подходит. 
           \ n \ n 
           Хранение 
           \ n \ n 
           Охладите готовый хумус в закрытом контейнере. Вы сможете использовать его примерно в течение недели после того, как сделаете это. Если он начинает шипеть, его обязательно следует выбросить. 
           \ n \ n 
           Хумус подходит для замораживания; его следует разморозить и использовать в течение пары месяцев. 
           ';
var solutionEntry = htmlSolution;

textarea.addEventListener ('ввод', updateCode);
window.addEventListener ('загрузка', updateCode);




textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault ();
    insertAtCaret ('\ t');
  }

  if (e.keyCode === 27) {
    textarea.blur ();
  }
};

function insertAtCaret (text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value) .substring (0, caretPos);
  var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length);
  textarea.value = лицевая сторона + текст + обратная сторона;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus ();
  textarea.scrollTop = scrollPos;
}



textarea.onkeyup = function () {
  
  
  if (solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } еще {
    solutionEntry = textarea.value;
  }

  updateCode ();
};

          Если вы застряли, вы всегда можете нажать кнопку Показать решение или посмотреть наш пример text-complete.html в нашем репозитории на github.

          Вложенные списки

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

            
            
  
          1.  Снимите кожицу с чеснока и крупно нарежьте. 
            2. 
  
          2.  Удалите из перца все семена и стебли и крупно нарежьте. 
            3. 
  
          3.  Добавьте все ингредиенты в кухонный комбайн. 
            4. 
  
          4.  Превратите все ингредиенты в пасту. 
            5. 
  
          5.  Если вы хотите грубый «ломкий» хумус, переваривайте его в течение короткого времени.
            6. 
  
          6.  Если вам нужен мягкий хумус, готовьте его дольше. 
            7.

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

            
            
  
          1.  Снимите кожицу с чеснока и крупно нарежьте.
            2. 
  
          2.  Удалите из перца все семена и стебли и крупно нарежьте. 
            3. 
  
          3.  Добавьте все ингредиенты в кухонный комбайн. 
            4. 
  
          4.  Превратите все ингредиенты в пасту.
    
              
      
            •  Если вы хотите получить грубый «ломкий» хумус, переваривайте его в течение короткого времени. 
              • 
      
            •  Если вам нужен мягкий хумус, готовьте его дольше. 
              • 
    
            
  
            5.

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

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

          Акцент

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

          Я рад, что вы не опоздали.

          Я рада ты не опоздал .

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

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

            
           Я  рад , что вы не  опоздали .

          Сильное значение

          Чтобы подчеркнуть важные слова, мы склонны подчеркивать их в устной речи и жирным шрифтом — в письменной речи.Например:

          Жидкость высокотоксичная .

          Я рассчитываю на тебя. Не опаздывай !

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

            
           Эта жидкость  очень токсична . 
          


           Я рассчитываю на вас.  Не  опаздывай!

          При желании вы можете вложить друг в друга сильные и упорные:

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

          Активное обучение: давайте будем важны

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

            
           Прямой вывод 
          


          

          


           Редактируемый код 
          

           Нажмите клавишу Esc, чтобы переместить фокус из области кода (Tab вставляет символ табуляции). 
          




          
  
  

          
            
            html {
  семейство шрифтов: без засечек;
}

h3 {
  размер шрифта: 16 пикселей;
}

.a11y-label {
  маржа: 0;
  выравнивание текста: вправо;
  размер шрифта: 0,7 бэр;
  ширина: 98%;
}

тело {
  маржа: 10 пикселей;
  фон: # f5f9fa;
}
  
            var textarea = document.getElementById ('код');
var reset = document.getElementById ('сбросить');
var solution = document.getElementById ('решение');
var output = document.querySelector ('. output'););
var code = textarea.value;
var userEntry = textarea.value;

function updateCode () {
  output.innerHTML = textarea.value;
}

reset.addEventListener ('щелчок', function () {
  textarea.value = код;
  userEntry = textarea.value;
  solutionEntry = htmlSolution;
  solution.value = 'Показать решение';
  updateCode ();
});

solution.addEventListener ('щелчок', function () {
  если (решение.value === 'Показать решение') {
    textarea.value = solutionEntry;
    solution.value = 'Скрыть решение';
  } еще {
    textarea.value = userEntry;
    solution.value = 'Показать решение';
  }
  updateCode ();
});

var htmlSolution = '
           Важное примечание 
           \ n 
           В  воскресенье, 9 января 2010 г.  банда  готов  была замечена воровством   несколько  садовых гномов  из торгового центра в центре  Милуоки .Все они были одеты в  зеленые комбинезоны  и  дурацкие шляпы , и, похоже, время для них было настоящим китом. Если у кого-то есть  какая-либо  информация об этом инциденте, обратитесь в полицию  сейчас . 
           ';
var solutionEntry = htmlSolution;

textarea.addEventListener ('ввод', updateCode);
window.addEventListener ('загрузка', updateCode);




textarea.onkeydown = function (e) {
  if (e.keyCode === 9) {
    e.preventDefault ();
    insertAtCaret ('\ t');
  }

  если (е.keyCode === 27) {
    textarea.blur ();
  }
};

function insertAtCaret (text) {
  var scrollPos = textarea.scrollTop;
  var caretPos = textarea.selectionStart;

  var front = (textarea.value) .substring (0, caretPos);
  var back = (textarea.value) .substring (textarea.selectionEnd, textarea.value.length);
  textarea.value = лицевая сторона + текст + обратная сторона;
  caretPos = caretPos + text.length;
  textarea.selectionStart = caretPos;
  textarea.selectionEnd = caretPos;
  textarea.focus ();
  textarea.scrollTop = scrollPos;
}



textarea.onkeyup = function () {
  
  
  if (solution.value === 'Показать решение') {
    userEntry = textarea.value;
  } еще {
    solutionEntry = textarea.value;
  }

  updateCode ();
};

          Курсив, полужирный, подчеркивание …

          Элементы, которые мы обсуждали до сих пор, имеют четкую связанную семантику. Ситуация с , и несколько сложнее. Они возникли для того, чтобы люди могли писать полужирный, курсив или подчеркнутый текст в эпоху, когда CSS все еще плохо поддерживался или вообще не поддерживался.Подобные элементы, которые влияют только на представление, а не на семантику, известны как презентационные элементы и больше не должны использоваться, потому что, как мы видели ранее, семантика очень важна для доступности, SEO и т. Д.

          HTML5 переопределил , и с новыми, несколько сбивающими с толку семантическими ролями.

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

          • используется для передачи значения, традиционно передаваемого курсивом: иностранные слова, таксономическое обозначение, технические термины, мысль …
          • , используется для передачи значения, традиционно передаваемого жирным шрифтом: ключевые слова, названия продуктов, ведущее предложение…
          • используется для передачи значения, традиционно передаваемого подчеркиванием: имя собственное, орфографические ошибки …

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

           

          
  Колибри с рубиновым горлом ( Archilochus colubris )
  является наиболее распространенным колибри в восточной части Северной Америки.

          



          
  В меню было море экзотических слов, таких как  ватрушка ,
   nasi goreng  и  суп по-ланьонски .

          



          
  Когда-нибудь я научусь лучше  писать .

          



            
  
          1. 
     Отрежьте  два куска хлеба от буханки.
            2. 
  
          2. 
     Вставьте  ломтик помидора и лист
    салат между ломтиками хлеба.
  
            3.

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

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

          Работа с текстом HTML (в двух словах о веб-дизайне, 2-е издание)

          10.2. Работа с текстом HTML

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

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

          10.2.1. Абзацы и разрывы строк

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

          Абзацы — это самые элементарные элементы текстового документа. В
          HTML они обозначаются заключением диапазона текста в теги абзаца.
          (

          …

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

          ), цитаты
          (

          ), подразделения
          (

          ) и различные списки.

          Технически закрывающий

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

          и вставьте

          , как если бы они были строчными пробелами.Этот
          подходит для большинства современных веб-целей, но следует отметить, что
          слабое кодирование также может быть недопустимым на будущей веб-странице
          языки описания (см. главу 31, «XHTML»). это
          уже важно правильно пометить абзацы для использования с каскадом
          Таблицы стилей. Наверное, неплохо попасть в
          привычка закрывать все теги, которые вы когда-то оставили висеть.

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

          На следующих двух рисунках показана разница между пунктирными линиями.
          с тегом

          и

          . На рисунке 10-1
          строка прерывается определением элемента блока абзаца, поэтому лишнее пространство
          вводится. На рисунке 10-2
          Тег
          разрывает строку, но не добавляет
          Космос.

          Рисунок 10-1. Вертикальный интервал добавлен над абзацами
          Рисунок 10-2. Разрыв текста с помощью тега

          не добавляет вертикального интервала

          10.2.2. Заголовки

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

          (заголовок верхнего уровня) на

          (самый низкий уровень). Отображение браузеров
          заголовки с уменьшающимся размером шрифта, чтобы

          отображаются в максимально возможном
          font и

          отображаются самым мелким шрифтом.

          Фактически,

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

          Рисунок 10-3. Результаты шести тегов заголовков с обычным основным текстом для сравнения

          Допустимый синтаксис HTML требует, чтобы заголовки располагались по порядку (т. Е.

          не может предшествовать

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

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

          10. Форматирование текста 10.3. Стили встроенного типа

          Авторские права © 2002 O’Reilly & Associates. Все права защищены.

          Basic HTML: текстовые элементы в HTML

          Урок 3. Текстовые элементы в HTML

          / ru / basic-html / create-a-webpage / content /

          Добавление текстовых элементов в HTML

          Этот урок является частью цикла по компьютерному программированию .Вы можете перейти к разделу «Введение в программирование», если хотите начать с самого начала.

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

          Элемент абзаца

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

           
           Это абзац

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

          Элементы заголовка

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

           
           Это элемент заголовка

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

          Элементы заголовка имеют шесть уровней по умолчанию от ,

          до

          , которые можно рассматривать как порядка важности . Например, если вы поместите

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

          немного менее и важен, и так далее.

          Они также поставляются с некоторыми стилями браузера по умолчанию , которые усиливают этот порядок важности: элемент

          является самым большим,

          меньше, и тому подобное.

           
           Это самый большой 
          

           Этот немного меньше 
          

           Этот еще меньше 
          

           Они становятся все меньше 
          

           Этот даже не такой уж и большой 
          

           Сейчас довольно мало
          Элементы форматирования текста

          Элементы форматирования текста используются для изменения внешнего вида текста определенными предопределенными способами. Например, вот несколько распространенных элементов форматирования текста:

          • B старый : элемент выделяет свое содержимое жирным шрифтом.
          • Курсив : элемент выделяет его содержимое курсивом.
          • Подчеркнутый : Элемент подчеркивает его содержимое.

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

           
           Эти слова не полужирные, но  эти два  выделены.

          Этот HTML-код будет отображаться так:

          Попробуй!

          Попробуйте поэкспериментировать с с каждым из элементов, рассмотренных в этом уроке во входных данных ниже. Вы можете ввести все, что хотите, но если вам нужны идеи о том, что вводить, попробуйте использовать элементы ниже в качестве примера.

           
           Долгая спокойная ночь 
          

           
           Глава 1: Город и тишина  

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

            Надеюсь, ты не хочешь драться , - подумал он про себя.  Потому что, если да, то вы его нашли.

          Введите здесь свои HTML-элементы:

          Сделай сам!

          Откройте файл index.html вашего проекта GCF Programming Tutorials в текстовом редакторе, и давайте добавим несколько текстовых элементов .Для лучшего понимания убедитесь, что вы действительно набираете этот код, а не копируете и вставляете его.

          1. Когда вы впервые создали этот файл, у вас уже был один элемент фактического содержания на странице. Сначала найдите этот элемент:
             
             Привет, мир!
          2. Продолжайте и удалите этот элемент .
          3. Вместо этого давайте начнем делать что-то, что больше похоже на настоящую веб-страницу, которую вы действительно можете увидеть в обычной жизни: веб-страницу с обзором фильма .Начните с заголовка и обязательно поместите его внутри элемента , где раньше был ваш элемент

            :

             
             Cinema Classics Movie Reviews
          4. Чуть ниже добавим подзаголовок . Хотя первый заголовок был основным заголовком всей вашей веб-страницы, этот будет просто заголовком для вашего обзора выдуманного хита блокбастера:
             
             Обзор: Basketball Dog (2018)
          5. Теперь добавим немного текста .Это суть вашего обзора, поэтому слов намного больше, но обратите внимание, что они все еще просто заключены в простые теги

            , по одному для каждого отдельного абзаца. Добавьте это чуть ниже только что добавленного элемента

            :

             
             4 из 5 звезд 
            

             Режиссер Вики Флеминг рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер (озвучивает Бринсон Ламблбрант). Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но одна особенность отличает этот отрывок: Ровер играет в баскетбол, и он чертовски хорош в этом.
            

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

             Полный список актеров можно найти на веб-сайте Basketball Dog.
          6. Учитывая, что она режиссер фильма, похоже, что «Вики Флеминг» может быть самым важным именем в этих абзацах, поэтому давайте сделаем его жирным , чтобы привлечь к нему больше внимания.Оберните только это имя тегами и , например:
              Vicki Fleming
          7. Также было бы неплохо поставить рейтинг отдельно от остального текста. Давайте выделим курсивом, чтобы отделить его. Оберните только эти слова тегами и , например:
             
              4 из 5 звезд

          После того, как вы все это сделаете, ваш полный код должен выглядеть так:

           
  
    
           Обзоры фильмов о классике кино 
          
    
           Обзор: Basketball Dog (2018) 
          
    
            4 из 5 звезд  
          
    
           Режиссер  Вики Флеминг  рассказывает трогательную историю о мальчике по имени Пит (Трент Дагсон) и его собаке Ровер (озвучивает Бринсон Ламблбрант).Вы можете подумать, что мальчик и его собака, познающие истинную ценность дружбы, звучат знакомо, но в этом моменте есть одна важная особенность: Ровер играет в баскетбол, и он чертовски хорош в этом. 
          
    
           Хотя, возможно, не было необходимости включать все 150 минут чемпионата Rover в реальном времени, Basketball Dog сохранит ваш интерес на протяжении всего 4-часового воспроизведения, и в конце концов любой любитель собак будет плакать. Если вы любите баскетбол или домашних животных, этот фильм для вас. 
          
    
           Полный список актеров можно найти на сайте Basketball Dog.

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

          / ru / basic-html / lists-in-html / content /

          HTML 101

          Работа с текстом в HTML

          Чтобы отобразить текст или что-то еще в вашем HTML-документе, он должен быть между тегами и.

          Посмотрите еще раз на этот пример:




          Привет, мир

          <ТЕЛО>

          КАК МИР!


          • Во-первых, строка Howdy World отображает слова «Howdy World» в строке заголовка (левый верхний угол) окна вашего браузера.
          • Во-вторых, в строках …
            HOWDY WORLD!
            … отображается «HOWDY WORLD!» в окне вашего браузера.
            Обратите внимание, что теги
            …
            центрируют слова «HOWDY WORLD!»

          Теперь давайте посмотрим на HTML-коды для изменения текста.

          Взгляните на этот код:


          Привет! Добро пожаловать на мою личную страничку.Я надеюсь тебе это понравится.

          Я старшеклассник, откусивший более
          он может жевать. Я живу недалеко от городка Бенуа в штате
          Висконсин, земля сыра!

          Это моя первая попытка открыть веб-страницу. Наслаждаться!

          Вот как выглядит приведенный выше код:

          Привет! Добро пожаловать на мою личную страничку. Я надеюсь тебе это понравится.
          Я старшеклассник, который откусил больше, чем
          он может жевать.Я живу недалеко от городка Бенуа в штате
          Висконсин, земля сыра!
          Это моя первая попытка открыть веб-страницу. Наслаждаться!

          Все пошло не так! Чтобы браузер завершал строки и абзацы правильно, необходимо поставить специальные маркеры.
          В отличие от тегов до сих пор, они представляют собой отдельные действия, у которых нет «начала» или «конца». Они не бывают парами. Чтобы просто
          завершить одну строку и перейти к следующей, используйте разрыв строки или
          .Чтобы завершить строку, а также показать пустую строку перед началом чего-либо
          в противном случае используйте маркер абзаца

          . Чтобы исправить ситуацию, вы должны отредактировать приведенный выше текст следующим образом:


          Привет! Добро пожаловать на мою личную страничку. Надеюсь, вам понравится.


          Я старшеклассник, откусивший более

          он может жевать. Я живу недалеко от городка Бенуа в штате

          Висконсин, земля сыра!


          Это моя первая попытка открыть веб-страницу.Наслаждаться!

          Вот как выглядит этот код выше:

          Привет! Добро пожаловать на мою личную страничку. Я надеюсь тебе это понравится.

          Я старшеклассник, откусивший более
          он может жевать. Я живу недалеко от городка Бенуа в штате
          Висконсин, земля сыра!

          Это моя первая попытка открыть веб-страницу. Наслаждаться!

          Намного лучше! Теперь давайте посмотрим, что можно делать с текстом.

          Стили физического текста

          Во-первых, это теги стиля. Самые простые — для физических стилей, таких как жирный шрифт. Я знаю только три, все из которых
          показано ниже. У них есть начало и конец; вы должны сказать, где, например, жирный шрифт начинается и где он
          заканчивается.

          Полужирный шрифт на вашем компьютере выглядит так

          Курсив выглядит так.

          В тексте на пишущей машинке используется шрифт фиксированной ширины.

          Стили также можно комбинировать.

          Вот как выглядит приведенный выше код:

          Полужирный шрифт на вашем компьютере выглядит так
          Курсив выглядит так.
          В тексте на пишущей машинке используется шрифт фиксированной ширины
          Стили также можно комбинировать.

          Стили и заголовки логического текста

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

          Взгляните на этот код и пример ниже:

          HTML — это язык, используемый для страниц www.
          Тестирование 1 2 3.
          printf («Значение n% d \ n», n)
          (Прервать, Повторить, Ошибка)?
          имя пользователя
          Эта штука включена?
          имя пользователя, хост
          Вы же серьезно!

          Заголовок 1 уровня

          Заголовок 2 уровня

          Заголовок 3-го уровня

          Заголовок четвертого уровня

          Заголовок 5 уровня


          Заголовок уровня 6

          Вот как выглядит приведенный выше код:

          HTML — это язык, используемый для страниц www.
          Тестирование 1 2 3
          printf («Значение n равно% d \ n», n)
          (Abort, Retry, Fail)?
          имя пользователя
          Эта штука включена?
          имя пользователя, хост
          Вы не можете быть серьезными!

          Заголовок 2-го уровня

          Заголовок 3-го уровня

          Заголовок 4-го уровня

          Заголовок 5-го уровня

          Заголовок 6-го уровня

          Синтаксис: <РАЗМЕР ШРИФТА = n COLOR = "# nnnnnn">...

          Таблица:

          SIZE = n Атрибут SIZE управляет размером текста. «n» должно быть целым числом {1-7}.

          Вот пример атрибута SIZE:

          Сначала HTML-код:

          Оптимальная оценка!
          Оптимальная оценка!
          Оптимальная оценка!
          Оптимальная оценка!
          Оптимальная оценка!
          Оптимальная оценка!
          Оптимальная оценка!

          Вот результат:

          Оптимальная оценка!
          Optimum Est!
          Optimum Est!
          Optimum Est!
          Optimum Est!
          Optimum Est!
          Optimum Est!

          Полезно отметить, что размер по умолчанию — 3.

          Перейти к следующему атрибуту: ЦВЕТ

          ЦВЕТ = #rrggbb или ЦВЕТ = цвет

          Атрибут color устанавливает цвет текста, который будет отображаться на экране. #rrggbb — шестнадцатеричный цвет, обозначающий
          значение цвета RGB. В качестве альтернативы можно выбрать один из доступных предопределенных цветов.

          Пример:

          Этот текст синий.

          Этот текст также синий.

          Этот текст синий.

          Этот текст также синий.

          Есть два типа списков, которые вы можете использовать в своем HTML-коде:

          Без заказа,

            Заказано,

              Вот пример неупорядоченного списка:

              • Позиция 1
                .
              • Позиция 2
                .
              • Пункт 3
                .

              Вот как выглядит приведенный выше код:

              Вот пример упорядоченного списка:

              1. Позиция 1
                .
              2. Позиция 2
                .
              3. Пункт 3
                .

              Вот как выглядит приведенный выше код:

              1. Элемент 1
              2. Поз. 2.
              3. Поз. 3.

          Что можно и чего нельзя делать при добавлении разрыва строки HTML

          В HTML абзац всегда начинается с новой строки — но что, если вы хотите, чтобы текст внутри абзаца начинался с новой строки? В этом случае вам нужно будет сделать разрыв строки.

          Давайте подробнее рассмотрим этот элемент HTML и способы его использования.

          Что такое разрыв строки в HTML?

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

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

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

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

          См. «Параграф пера против элемента разрыва строки» Кристины Перриконе (@hubspot) на CodePen.

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

          Как сделать разрыв строки в HTML

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

          Допустим, я хочу отобразить на веб-странице «кухонное здание» Гвендолин Брукс. В этом случае я бы заключил строфы в теги

          . Затем я помещал тег
          везде, где я хотел бы, чтобы строки в каждой строфе разрывались.

          Вот HTML:

            
           
           кухонное здание 
           
           
           Мы - вещи сухих часов и непреднамеренного плана, 
           
           Серые и серые.«Dream» издает головокружительный звук, не сильный 
           
           Как «аренда», «кормление жены», «удовлетворение мужчины». 
           
           
           Но может ли мечта проникнуть сквозь луковые пары 
           
           Его бело-фиолетовый, борьба с жареным картофелем 
           
           И вчерашний мусор, созревающий в холле, 
           
           Flutter, или спой арию в этих комнатах 
           
           
           Даже если бы мы были готовы впустите его, 
           
           Было время, чтобы согреть его, содержать в чистоте, 
           
           Предвидеть сообщение, пусть оно начнется? 
           
           
           Интересно.Но не хорошо! ни на минуту! 
           
           Поскольку Номер Пять сейчас нет в ванной, 
           
           Мы думаем о теплой воде, надеемся попасть в нее. 
           
           
            -Гвендолин Брукс < / em>

          Вот результат:

          См. «Стихотворение с пером с элементом разрыва строки» Кристины Перриконе (@hubspot) на CodePen.

          Разрыв строки HTML не работает

          Если разрыв строки HTML не работает — особенно если вы работаете в текстовом редакторе такой системы управления контентом, как WordPress, — возможно, вы используете элемент неправильно.

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

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

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

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

          Например, я хотел бы показать отрывок из пьесы « Дрянь: Священные Писания» .Я должен использовать элемент цитаты, который автоматически добавит поля слева и справа от текста. Если бы я использовал тег
          для имитации отступа элемента цитаты, я бы злоупотреблял элементом HTML.

          Вот правильный HTML:

            
           
           
           
           
           
           Любовь ужасна! Это ужасно. Это больно. Это пугает, заставляет сомневаться в себе, судить о себе, дистанцироваться от других людей в своей жизни.Делает вас эгоистичным. Делает вас жутким. Это делает вас одержимым своими волосами. Делает тебя жестоким. Заставляет вас говорить и делать то, о чем вы никогда не думали ... 
           
           
           
           
           —PRIEST,  Дрянь: Священные Писания

          Вот результат:

          См. Pen YzZpaRG Кристины Перриконе (@hubspot) на CodePen.

          Если вы измените размер окна браузера, вы заметите, что цитата автоматически подстраивается под размер экрана и не имеет неровных краев или неровных строк текста.

          Вот неправильный HTML:

            
           
           
           
           Любовь ужасна! Это ужасно. Это больно. Это пугает, заставляет сомневаться в себе, осуждать себя, дистанцироваться от других людей в своей жизни. Делает вас эгоистичным. Делает вас пугающим. 
           
           Это делает вас одержимым своими волосами. Делает тебя жестоким. Заставляет вас говорить и делать то, о чем вы никогда не думали 
           
          . 
           
           —PRIEST,  Дрянь: Священные Писания

          Вот результат:

          См. Перо. Неправильное использование элемента
          для отображения отрывка из пьесы Кристины Перриконе (@hubspot) на CodePen.

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

          Чтобы узнать больше о том, как сделать ваш веб-сайт доступным, прочтите The Ultimate Guide to Web Accessibility.

          Добавление разрывов строк в HTML

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

          Работа с формами | Документация Django

          В HTML форма — это набор элементов внутри

          ...

          , которые
          позволить посетителю делать такие вещи, как ввод текста, выбор параметров, манипулирование
          объекты или элементы управления и т. д., а затем отправить эту информацию обратно в
          сервер.

          Некоторые из этих элементов интерфейса формы — ввод текста или флажки — встроены
          в сам HTML.Другие намного сложнее; интерфейс, который всплывает
          выбор даты или позволяет перемещать ползунок или управлять элементами управления.
          обычно используют JavaScript и CSS, а также элементы HTML-формы для
          добиться этих эффектов.

          В качестве примера форма входа для администратора Django содержит несколько
          элементов: один из type = "text" для имени пользователя, один из
          type = "password" для пароля и один из type = "submit" для
          Кнопка «Войти».Он также содержит некоторые скрытые текстовые поля, которые пользователь
          не видит, что Django использует для определения дальнейших действий.

          Он также сообщает браузеру, что данные формы должны быть отправлены по URL-адресу
          указано в атрибуте действия

          - / admin / - и что он
          должен быть отправлен с использованием механизма HTTP, указанного в атрибуте method -
          пост .

          Когда срабатывает элемент ,
          данные возвращаются на / admin / .

          GET и POST

          GET и POST - единственные методы HTTP, которые можно использовать при работе с формами.

          Форма входа в Django возвращается с использованием метода POST , при котором браузер
          объединяет данные формы, кодирует их для передачи, отправляет на сервер,
          а затем получает ответ.

          GET , напротив, объединяет представленные данные в строку и использует это
          составить URL.URL-адрес содержит адрес, по которому должны быть отправлены данные, как
          а также ключи и значения данных. Вы можете увидеть это в действии, если выполните поиск
          в документации Django, которая создаст URL-адрес формы
          https://docs.djangoproject.com/search/?q=forms&release=1 .

          GET и POST обычно используются для разных целей.

          Любой запрос, который может быть использован для изменения состояния системы - например,
          запрос, который вносит изменения в базу данных - должен использовать POST . ПОЛУЧИТЬ
          следует использовать только для запросов, не влияющих на состояние системы.

          GET также не подходит для формы пароля, потому что пароль
          будет отображаться в URL-адресе и, следовательно, также в истории браузера и журналах сервера,
          все в виде обычного текста. Он также не подходит для больших объемов данных,
          или для двоичных данных, таких как изображение. Веб-приложение, использующее GET
          запросы на формы администратора представляют собой угрозу безопасности: злоумышленник может легко
          имитируйте запрос формы, чтобы получить доступ к конфиденциальным частям системы. POST в сочетании с другими средствами защиты, такими как защита CSRF от Django, обеспечивает больший контроль над доступом.

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

          Работа с текстовыми данными - документация scikit-learn 1.0.1

          Цель этого руководства - изучить некоторые из основных scikit-learn
          инструменты по единственной практической задаче: анализ текстовой коллекции
          документы (сообщения групп новостей) по двадцати различным темам.

          В этом разделе мы увидим, как:

          • загрузить содержимое файла и категории

          • извлечь векторы признаков, подходящие для машинного обучения

          • обучить линейную модель для выполнения категоризации

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

          Учебное пособие по настройке

          Чтобы начать работу с этим руководством, вы должны сначала установить
          scikit-learn и все его необходимые зависимости.

          См. Инструкцию по установке.
          страницу для получения дополнительной информации и инструкций для конкретной системы.

          Источник этого руководства можно найти в папке scikit-learn:

           scikit-learn / doc / tutorial / text_analytics /

          Источник также можно найти на Github.

          Папка с учебником должна содержать следующие подпапки:

          • * .rst files - источник учебного документа, написанного с помощью sphinx

          • данные - папка для хранения наборов данных, используемых во время обучения

          • скелетов - пример неполных скриптов для упражнений

          • решения - решения упражнений

          Вы уже можете скопировать скелеты в новую папку где-нибудь
          на жестком диске с именем sklearn_tut_workspace , где вы
          будет редактировать ваши собственные файлы упражнений, сохраняя
          оригинальные скелеты целы:

           cp -r скелеты рабочий_директория / sklearn_tut_workspace

          Алгоритмам машинного обучения нужны данные.Перейти к каждому $ TUTORIAL_HOME / data
          подпапку и запустите оттуда сценарий fetch_data.py (после
          прочитав их сначала).

          Например:

           cd $ TUTORIAL_HOME / data / languages
меньше fetch_data.py
python fetch_data.py

          Загрузка набора данных 20 групп новостей

          Набор данных называется «Двадцать групп новостей». Вот официальная
          описание, цитата с сайта:

          Набор данных "20 групп новостей" содержит около 20 000
          документы группы новостей, разделенные (почти) равномерно по 20 различным
          группы новостей.Насколько нам известно, изначально он был собран
          Кена Лэнга, вероятно, для его статьи «Newsweeder: учимся фильтровать
          netnews », хотя он не упоминает этот сборник прямо.
          Коллекция 20 групп новостей стала популярным набором данных для
          эксперименты в текстовых приложениях методов машинного обучения,
          например, классификация текста и кластеризация текста.

          Далее мы будем использовать встроенный загрузчик набора данных для 20 групп новостей.
          из scikit-learn. В качестве альтернативы можно загрузить набор данных
          вручную с веб-сайта и используйте программу sklearn .datasets.load_files
          функцию, указав ее на подпапку 20news-bydate-train папки
          несжатая папка архива.

          Чтобы ускорить выполнение этого первого примера, мы будем
          работать с частичным набором данных только с 4 категориями из 20 доступных
          в датасете:

           >>> Categories = ['alt.atheism', 'soc.religion.christian',
... 'comp.graphics', 'sci.med']

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

           >>> из sklearn.наборы данных импортировать fetch_20newsgroups
>>> 20_train = fetch_20newsgroups (subset = 'train',
... категории = категории, перемешать = True, random_state = 42)

          Возвращенный набор данных - это scikit-learn «связка»: простой держатель
          объект с полями, к которым можно получить доступ как python dict
          ключи или объект атрибутов для удобства, например
          target_names содержит список требуемых имён категорий:

           >>> двадцать_поезд.target_names
['alt.atheism', 'comp.graphics', 'sci.med', 'soc.religion.christian']

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

           >>> len (двадцать_поезд. Данные)
2257
>>> len (двадцать_поездок. имена файлов)
2257

          Напечатаем первые строки первого загруженного файла:

           >>> print ("\ n" .join (20_train.data [0] .split ("\ n") [: 3]))
От: [email protected] (Майкл Коллиер)
Тема: Преобразование изображений в HP LaserJet III?
Nntp-Posting-Host: Хэмптон

>>> print (двадцать_ поезд.target_names [20_train.target [0]])
comp.graphics

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

          Из соображений скорости и экономии места scikit-learn загружает
          целевой атрибут в виде массива целых чисел, который соответствует
          индекс названия категории в списке target_names .Категория
          целочисленный идентификатор каждой выборки хранится в атрибуте target :

           >>> 20_train.target [: 10]
массив ([1, 1, 3, 3, 3, 3, 3, 2, 2, 2])

          Можно вернуть названия категорий следующим образом:

           >>> для t в двадцать_train.target [: 10]:
... print (20_train.target_names [t])
...
comp.graphics
comp.graphics
soc.religion.christian
soc.religion.christian
soc.religion.christian
soc.religion.christian
soc.religion.christian
научныйmed
sci.med
sci.med

          Вы могли заметить, что выборки перемешивались случайным образом, когда мы звонили
          fetch_20newsgroups (..., shuffle = True, random_state = 42) : это полезно, если
          вы хотите выбрать только подмножество образцов, чтобы быстро обучить модель и получить
          первое представление о результатах перед повторным обучением на полном наборе данных позже.

          Обучение классификатору

          Теперь, когда у нас есть функции, мы можем обучить классификатор, чтобы попытаться предсказать
          категория поста.Начнем с наивного Байеса
          классификатор, который
          обеспечивает хорошую основу для этой задачи. scikit-learn включает несколько
          варианты этого классификатора; наиболее подходящим для подсчета слов является
          полиномиальный вариант:

           >>> from sklearn.naive_bayes import MultinomialNB
>>> clf = MultinomialNB (). fit (X_train_tfidf, 20_train.target)

          Чтобы попытаться предсказать результат для нового документа, нам нужно извлечь
          объекты, использующие почти ту же цепочку извлечения признаков, что и раньше.Разница в том, что мы вызываем преобразование вместо fit_transform
          на трансформаторах, так как они уже подходят для тренировочного набора:

           >>> docs_new = ['Бог есть любовь', 'OpenGL на GPU работает быстро']
>>> X_new_counts = count_vect.transform (docs_new)
>>> X_new_tfidf = tfidf_transformer.transform (X_new_counts)

>>> предсказанный = clf.predict (X_new_tfidf)

>>> для документа, категория в zip-архиве (docs_new, прогнозируется):
... print ('% r =>% s'% (doc, 20_train.target_names [категория]))
...
'Бог есть любовь' => soc.religion.christian
'OpenGL на GPU работает быстро' => comp.graphics

          Строительство трубопровода

          Для упрощения векторизатора => преобразователя => классификатора
          для работы scikit-learn предоставляет класс Pipeline , который ведет себя
          как составной классификатор:

           >>> из sklearn.pipeline import Pipeline
>>> text_clf = Конвейер ([
... ('вектор', CountVectorizer ()),
... ('tfidf', TfidfTransformer ()),
... ('clf', MultinomialNB ()),
...])

          Имена vect , tfidf и clf (классификатор) произвольны.
          Мы будем использовать их для поиска подходящих гиперпараметров по сетке ниже.
          Теперь мы можем обучить модель с помощью одной команды:

           >>> text_clf.fit (20_train.data, 20_train.target)
Трубопровод(...)

          Оценка производительности на испытательном наборе

          Оценить точность прогноза модели столь же просто:

           >>> импортировать numpy как np
>>> 20_test = fetch_20newsgroups (subset = 'test',
... Categories = категории, shuffle = True, random_state = 42)
>>> docs_test = двадцать_test.data
>>> предсказанный = text_clf.predict (docs_test)
>>> np.mean (предсказано == 20_test.target)
0,8348 ...

          Достигнута точность 83,5%. Посмотрим, сможем ли мы добиться большего с помощью
          линейная опорная векторная машина (SVM),
          который широко считается одним из
          лучшие алгоритмы классификации текста (хотя и немного медленнее
          чем наивный Байес). Мы можем изменить учащегося, просто подключив другой
          объект классификатора в наш конвейер:

           >>> из sklearn.linear_model импорт SGDClassifier
>>> text_clf = Конвейер ([
... ('вектор', CountVectorizer ()),
... ('tfidf', TfidfTransformer ()),
... ('clf', SGDClassifier (потеря = 'шарнир', штраф = 'l2',
... альфа = 1e-3, random_state = 42,
... max_iter = 5, tol = Нет)),
...])

>>> text_clf.fit (20_train.data, 20_train.target)
Трубопровод(...)
>>> предсказанный = text_clf.predict (docs_test)
>>> np.mean (предсказано == двадцать_тест.цель)
0,9101 ...

          Мы достигли точности 91,3% с помощью SVM. scikit-learn предоставляет дополнительные
          утилит для более детального анализа производительности результатов:

           >>> из метрик импорта sklearn
>>> print (metrics.classification_report (20_test.target, прогнозируемый,
... target_names = двадцать_test.target_names))
                        точный отзыв поддержка f1-score

           альтернативный атеизм 0,95 0,80 0,87 319
         комп.графика 0,87 0,98 0,92 389
               sci.med 0,94 0,89 0,91 396
soc.religion.christian 0,90 0,95 0,93 398

              точность 0,91 1502
             макрос ср. 0,91 0,91 0,91 1502
          средневзвешенная 0,91 0,91 0,91 1502


>>> metrics.confusion_matrix (20_test.target, прогнозируемый)
массив ([[256, 11, 16, 36],
       [4, 380, 3, 2],
       [5, 35, 353, 3],
       [5, 11, 4, 378]])

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

          Настройка параметров с помощью поиска по сетке

          Мы уже встречали некоторые параметры, такие как use_idf в
          ТфидфТрансформатор . Классификаторы также имеют много параметров;
          например, MultinomialNB включает параметр сглаживания alpha и
          SGDClassifier имеет параметр штрафа альфа и настраиваемые потери
          и штрафы в целевой функции (см. документацию модуля,
          или используйте функцию Python help , чтобы получить их описание).

          Вместо настройки параметров различных компонентов
          цепочке, можно провести исчерпывающий поиск лучших
          параметры в сетке возможных значений. Пробуем все классификаторы
          на словах или биграммах, с idf или без него, и со штрафом
          параметр 0,01 или 0,001 для линейного SVM:

           >>> из sklearn.model_selection import GridSearchCV
>>> parameters = {
... 'vect__ngram_range': [(1, 1), (1, 2)],
... 'tfidf__use_idf': (Верно, Ложь),
... 'clf__alpha': (1e-2, 1e-3),
...}

          Очевидно, что такой исчерпывающий поиск может быть дорогостоящим. Если у нас есть несколько
          Количество ядер процессора в нашем распоряжении, мы можем сказать поисковику по сетке попробовать эти восемь
          комбинации параметров параллельно с параметром n_jobs . Если мы дадим
          этот параметр имеет значение -1 , поиск по сетке определит, сколько ядер
          установлены и используйте их все:

           >>> gs_clf = GridSearchCV (text_clf, параметры, cv = 5, n_jobs = -1)

          Экземпляр поиска по сетке ведет себя как обычный scikit-learn
          модель.Давайте выполним поиск на меньшем подмножестве обучающих данных.
          для ускорения вычислений:

           >>> gs_clf = gs_clf.fit (20_train.data [: 400], 20_train.target [: 400])

          Результатом вызова fit для объекта GridSearchCV является классификатор
          что мы можем использовать, чтобы предсказать :

           >>> 20_train.target_names [gs_clf.predict (['Бог есть любовь']) [0]]
soc.religion.christian

          Атрибуты объекта best_score_ и best_params_ сохраняют лучшее
          средний балл и настройка параметров, соответствующая этому баллу:

           >>> gs_clf.лучший результат_
0,9 ...
>>> для param_name в отсортированном (parameters.keys ()):
... print ("% s:% r"% (param_name, gs_clf.best_params_ [param_name]))
...
clf__alpha: 0,001
tfidf__use_idf: Верно
vect__ngram_range: (1, 1)

          Более подробная информация о поиске доступна на gs_clf.cv_results_ .

          Параметр cv_results_ можно легко импортировать в pandas как
          DataFrame для дальнейшего изучения.

          Упражнения

          Для выполнения упражнений скопируйте содержимое папки «скелеты» как
          новая папка с именем «рабочая область»:

           cp -r рабочая область скелетов

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

          Затем запустите оболочку ipython и запустите незавершенный скрипт с:

           [1]% рабочая область выполнения / упражнение_XX_script.py arg1 arg2 arg3

          Если инициировано исключение, используйте отладку % для запуска публикации
          mortem сеанс ipdb.

          Уточните реализацию и повторяйте до тех пор, пока упражнение не будет решено.

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

          Упражнение 1. Определение языка

          • Напишите конвейер классификации текста с помощью специального препроцессора и
            CharNGramAnalyzer с использованием данных из статей Википедии в качестве обучающего набора.

          • Оцените производительность на каком-нибудь тестовом наборе.

          Командная строка ipython:

          % запустить рабочую область / упражнения_01_language_train_model.py данные / языки / абзацы /

          Упражнение 2: Анализ настроений в обзорах фильмов

          • Напишите конвейер классификации текста, чтобы классифицировать обзоры фильмов как
            положительным или отрицательным.

          • Найдите хороший набор параметров с помощью поиска по сетке.

          • Оцените производительность на протянутом тестовом наборе.

          Командная строка ipython:

          % запустить рабочую область / упражнения_02_sentiment.py data / movie_reviews / txt_sentoken /

          Упражнение 3: Утилита классификации текста CLI

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

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

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *