Как найти теги для текста - Исправление недочетов и поиск решений вместе с Examum.ru

Скажите пожалуйста, как найти тег по содержащемуся в нем тексту.

from bs4 import BeautifulSoup
soup = BeautifulSoup('<h2><span class="team-disc ars-light"></span>Arsenal</h2>', 'lxml')
a = soup.find('h2') `

# возвращает <h2><span class="team-disc ars-light"></span>Arsenal</h2>

from bs4 import BeautifulSoup
soup = BeautifulSoup('<h2><span class="team-disc ars-light"></span>Arsenal</h2>', 'lxml')
a = soup.find('h2', text = 'Arsenal')

# Возвращает None

задан 24 апр 2018 в 18:30

AgioAgio

1211 серебряный знак11 бронзовых знаков

Чтобы найти тег, с заданным текстом:

>>> soup.find(text='Arsenal').parent
<h2><span class="team-disc ars-light"></span>Arsenal</h2>

Если точное совпадение не нужно, то можно text=re.compile('Arsenal') критерий использовать.

Чтобы ограничить найденные теги только h2 элементами и заданной подстрокой:

>>> soup.find(lambda tag: tag.name == 'h2' and 'Arsenal' in tag.text)
<h2><span class="team-disc ars-light"></span>Arsenal</h2>

ответ дан 2 мая 2018 в 7:05

jfsjfs

51.8k11 золотых знаков107 серебряных знаков306 бронзовых знаков

from bs4 import BeautifulSoup
soup = BeautifulSoup('<h2><span class="team-disc ars-light"></span>Arsenal</h2>', 'lxml')
print(soup.find('h2').text == 'Arsenal')

ответ дан 2 мая 2018 в 6:56

Dmitry ErohinDmitry Erohin

9865 серебряных знаков8 бронзовых знаков

Источник

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

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

Если кто-то ещё не видел, что из себя представляет код шаблона, то зайдите в Консоль — Внешний вид — Редактор.

Перед Вами откроется код файла style.css. Покрутите его вниз, и первое, что придёт Вам в голову будет: ё-моё, как же в этой массе английских слов, цифр и символов, найти то, что нам будет нужно.

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

Только сразу отгоните мысль типа: «Я в этом до самой смерти не разберусь». Разберётесь, и я Вам в этом помогу.

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

Вариант 1.

Условие: мы точно знаем то, что нам нужно найти.

Для примера возьмём код страницы.

Комбинация клавиш Contrl-F откроет окно поиска в правом верхнем углу, в которое можно ввести искомый элемент кода. Элемент и все его повторения подсветятся.

Этот поиск работает абсолютно для любого кода, открытого в браузере, то есть на странице.

Вариант 2.

Условие: мы видим элемент на странице, но не знаем ни его html, ни css.

В этом случае потребуется web-инспектор, или по другому Инструмент разработчика.

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

Главное не выбирайте «Просмотреть код страницы». Похоже, но не то.

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

Я покажу на примере web-инспектора Chrome.

Заходим на страницу и открываем web-инспектор. По умолчанию он откроется в двух колонках, в левой будет html код всех элементов, находящихся на странице, а в правой — css оформление.

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

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

Определить, какой код, какому элементу соответствует, очень просто.

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

Теперь найдём css этого элемента. Для этого надо один раз щёлкнуть левой клавишей по строке с html, и в правой колонке отобразятся все стили, которые ему заданы, а так-же стили, влияющие на элемент, от родительских элементов.

Теперь, зная class или id элемента, можно спокойно идти в файл style.css, найти в нём нужный селектор, с помощью Поиска (Ctrl+F), и править внешний вид элемента.

Желаю творческих успехов.

Неужели не осталось вопросов? Спросить

Перемена

— Мам, ну почему ты думаешь, что если я была на дне рождения, то сразу пила?!
— Дочь а нечего что я папа?
Объявление в метро: «при обнаружении подозрительных предметов сделайте подозрительное лицо.

В раздел > > > Исправляем шаблон WordPress. Веб-инспектор

Источник

Форматирование текста
Тег <pre>
Теги для отображения кода
Тег <address>
Аббревиатуры
Направление текста
Цитаты
Удаленный и вставленный текст

В HTML есть теги для изменения внешнего вида текста, такие как <b> и <i>.
Они используются для выделения текста полужирным шрифтом или курсивом, такие
теги в HTML называются тегами для форматирования.

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

Этот пример демонстрирует, как вы можете отредактировать текст в HTML документе, используя специальные теги:

<html>
  <body>

    <p><b>Текст</b></p>
    <p><strong>Текст</strong></p>
    <p><em>Текст</em></p>
    <p><i>Текст</i></p>
    <p><small>Текст</small></p>
    <p>Это<sub> нижний индекс</sub> и <sup>верхний индекс</sup></p>

  </body>
</html>

Попробовать »

Тег <pre>

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

<html>
  <body>

    <pre>
      Он сохраняет авторское форматирование текста
      (оставляет без изменений)
      и делает шрифт моноширинным
    </pre>

  </body>
</html>

Попробовать »

Теги для отображения кода

Пример, показанный ниже, демонстрирует разницу вывода содержимого тегов на экран:

<html>
  <body>

    <p><code>Программный код</code>
      <br>
      <kbd>Ввод с клавиатуры</kbd>
      <br>
      <samp>Образец кода</samp>
      <br>
      <var>Выделение переменной</var>
    </p>
    <p>
      Эти теги обычно используются для того, чтобы показать на странице программный код
    </p>

</body>
</html>

Попробовать »

Тег <address>

Адрес является распространенным элементом многих HTML-документов, для выделения адреса на странице существует специальный тег <address>, отделяющий текст, заключенный в него, от всего остального содержимого.

Чаще всего он используется для выделения контактной информации, например адреса электронной почты или способа связи с автором/владельцем документа, статьи или сайта:

<html>
  <body>

    <p>Вы можете найти меня на моем сайте</p>
    <address>
      <a href="www.puzzleweb.ru">Мой сайт для связи</a>
    </address>

  </body>
</html>

Попробовать »

Аббревиатуры

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

<html>
 <body>

    <p><abbr title="Неопознанный Летающий Объект">НЛО</abbr><br><br><br>
      Атрибут title нужен для всплывающей подсказки, она появляется
      при наведении курсора на аббревиатуру.
    </p>

  </body>
</html>

Попробовать »

Направление текста

Пример демонстрирует, как можно изменить направление текста:

<html>
  <body>

    <p>
      Тег bdo определяет направление текста - слева направо и наоборот.<br><br>
      <bdo dir="rtl">
        Это наш текст
      </bdo>
    </p>

  </body>
</html>

Попробовать »

Цитаты

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

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

<html>
  <body>

    <p>Длинная цитата:</p>
    <blockquote>
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
      Это очень длинная цитата.Это очень длинная цитата.Это очень длинная цитата.
    </blockquote>
    <p><b>Для длинных цитат браузер вставляет отступы со всех сторон. </b>
      <br><br>
      Короткая цитата: 
      <q>Это короткая цитата.</q><br>
      <b>Короткие цитаты заключаются в двойные кавычки.</b>
    </p>

</body>
</html>

Попробовать »

Удаленный и вставленный текст

Пример демонстрирует, как можно в документе пометить текст, который был удален (помечается как перечеркнутый) или вставлен (помечается как подчеркнутый):

<html>
  <body>

    <p>
      Содержимое тега del, большинство браузеров отображает <del>перечеркнутым</del>, а 
      содержимое тега ins - <ins>подчеркнутым</ins>
    </p>

  </body>
</html>

Попробовать »

Примечание: также подчёркивание и перечёркивание можно задать с помощью CSS свойства text-decoration.

Источник

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

Правильное и качественное форматирование текста в документе решает две задачи:

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

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

Рассмотрим основные и дополнительные теги форматирования текста в HTML.

Заголовки в HTML создаются с помощью тега h после которого идет цифра от 1 до 6, например <h1>, где:

h — сокращение от английского heading (заголовок);
1…6 — уровни заголовка.

Заголовки используются для определения нового раздела или подраздела. Заголовки имеют иерархию, от заголовка <h1> до заголовка <h6>.

Например, если мы рассматриваем какую-либо обширную тему, мы заключаем ее название в <h1>. Заголовок на уровень ниже в <h2> и так далее до <h6>.

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

h1 — рецепты с гречкой;
h2 — рецепты с гречкой в (мультиварке, духовке, кастрюле);
h3 — рецепты с гречкой в … с (мясом, луком, курицей);
h4 — рецепты с гречкой в … с … на (завтрак, обед, ужин);
h5 — рецепты с гречкой в … с … на … как (просто, по-купечески);
h6 — рецепты с гречкой в … с … на … как … + фото, видео, инструкция и так далее.

Может это не самая лучшая структура, но смысл ясен.

Так же подзаголовки могут разделяться на какие-то логические действия. Например:

h1 — как построить баню;
h2 — как выбрать фундамент;
h3 — виды фундаментов;
h4 — ленточный (или иной вид) фундамент;
h5 — особенности ленточного фундамента.

В общем и целом понимание должно появиться. Идем дальше.

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

Если мы наберем следующий код:

<h1>Заголовок 1-го уровня</h1>
<h2>Заголовок 2-го уровня</h2>
<h3>Заголовок 3-го уровня</h3>
<h4>Заголовок 4-го уровня</h4>
<h5>Заголовок 5-го уровня</h5>
<h6>Заголовок 6-го уровня</h6>

То результат будет следующим.

Рассмотрим каждый элемент подробнее.

Тег h1

Элемент <h1> — заголовок верхнего уровня. Он должен встречаться в документе один раз в самом начале. Это как заголовок книги, ведь название книги не может встречаться несколько раз.

Рекомендуется делать уникальный заголовок <h1> для каждой страницы сайта.

Стандартный стиль для заголовка <h1>:

display: block; font-size: 2em; margin-block-start: 0.67em; margin-block-end: 0.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег h2

Элемент <h2> — подзаголовок <h1>. В отличии от <h1> может встречаться на веб-странице несколько раз.

Стандартный стиль для заголовка <h2>:

display: block; font-size: 1.5em; margin-block-start: 0.83em; margin-block-end: 0.83em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег h3

Подзаголовок элемента <h2>.

Стандартный стиль для заголовка <h3>:

display: block; font-size: 1.17em; margin-block-start: 1em; margin-block-end: 1em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег h4

Подзаголовок элемента <h3>.

Стандартный стиль для заголовка <h4>:

display: block; margin-block-start: 1.33em; margin-block-end: 1.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег h5

Подзаголовок элемента <h4>.

Стандартный стиль для заголовка <h5>:

display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег h6

Подзаголовок элемента <h5>.

Стандартный стиль для заголовка <h6>:

display: block; font-size: 0.67em; margin-block-start: 2.33em; margin-block-end: 2.33em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

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

Форматирование текста — это разметка (процесс разметки) текста. В HTML используется много тегов форматирования, которые со временем заменяет CSS. Рассмотрим эти элементы.

Тег b

Элемент <b> выделяет текст полужирным, не несет смысловой нагрузки.
Пример.

<b>Жирный текст</b> в этом предложении.

Результат.

Жирный текст в этом предложении.

Тег strong

Элемент <strong> выделяет текст полужирным, придает выделеному тексту смысловую нагрузку.
Пример.

<strong>Жирный текст со смысловой нагрузкой</strong> в этом предложении.

Результат.

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

Тег i

Элемент <i> выделяет текст курсивом без смысловой значимости.
Пример.

<i>Курсив</i> в этом предложении.

Результат.

Курсив в этом предложении.

Тег em

Элемент <em> выделяет текст курсивом со смысловой значимостью, визуально не отличается от <i>.
Пример.

<em>Курсив со смысловой нагрузкой</em> в этом предложении.

Результат.

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

Тег small

Элемент <small> уменьшает размер текста на единицу.

Пример.

Стандартный текст, <small>а это текст в теге small</small>.

Результат.

Стандартный текст, а это текст в теге small.

Тег sup

Элемент <sup> используется для создания надстрочного текста.

Пример.

Объем емкости для воды был 3 м.<sup>3</sup>

Результат.

Объем емкости для воды был 3 м.³

Тег sub

Элемент <sub> используется для создания подстрочного текста.
Пример.

Задача: нужно найти x<sub>1</sub> если...

Результат.

Задача: нужно найти x₁ если…

Тег ins

Элемент <ins> предназначен для выделения текста в новой версии веб-документа, подчеркивает текст. Применяется довольно редко (по собственному опыту).

Пример.

Актуальная версия HTML <ins>5</ins>

Результат.

Актуальная версия HTML 5

Тег del

Элемент <del> предназначен для пометки текста на удаление, перечеркивает текст.
Пример.

Актуальная версия HTML <del>4.1</del> <ins>5</ins>

Результат.
Актуальная версия HTML 4.1 5

Тег mark

Элемент <mark> выделяет текст желтым цветом.
Пример.

Я даю согласие на <mark>обработку персональных данных</mark>.

Результат.

Я даю согласие на обработку персональных данных.

Устаревшие теги

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

Тег u

Элемент <u> использовался для подчеркивания текста.

Стандартный стиль тега:
text-decoration: underline;

То есть вместо кода:

Это <u>подчеркнутый</u> текст.

В настоящее время рекомендуется использовать его стиль, то есть:

<style>
.under{text-decoration: underline;}
</style> 
Это <span class="under">подчеркнутый</span> текст.

Результат будет одинаков.

Это подчеркнутый текст.

На смену <u> пришел элемент <ins>.

Тег s

Элемент <s> использовался для создания перечеркнутого текста.
Стандартный стиль тега:
text-decoration: line-through;

Тут все аналогично предыдущему тегу. Вместо <s> используется <del> либо оформление с помощью CSS.

Абзац и перенос текста

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

Тег p

Элемент <p> используется для создания параграфа, то есть он разделяет текст на отдельные абзацы между которыми стоит пустая строка.
Пример.

<p>Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. </p><p>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.</p>

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.

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

Тег br

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

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <br>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Lorem Ipsum — это текст-«рыба», часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной «рыбой» для текстов на латинице с начала XVI века.
В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Тег hr

Элемент <hr> используется для создания горизонтальной линии. Не требует закрывающего тега.

Пример.

Lorem Ipsum - это текст-"рыба", часто используемый в печати и вэб-дизайне. Lorem Ipsum является стандартной "рыбой" для текстов на латинице с начала XVI века. <hr>В то время некий безымянный печатник создал большую коллекцию размеров и форм шрифтов, используя Lorem Ipsum для распечатки образцов.

Результат.

Цитаты, определения и направление текста

Тег abbr

Элемент <abbr> предназначен для форматирования аббревиатур. Подчеркивает аббревиатуру пунктирной линией. Расшифровка указывается в атрибуте title. В справочнике HTML есть подробное описание тега <abbr>.

Пример.

<p><dfn><abbr title="HyperText Markup Language">HTML</abbr></dfn> язык гипертекстовой разметки.</p>

Результат.

HTML язык гипертекстовой разметки.

Тег blockquote

Элемент <blockquote> предназначен для выделения цитат в тексте.

Пример.

<blockquote cite="https://abuzov.com/">
    <h1>HTML тег: blockquote</h1>
    <p>Блок текста, цитируемый из других источников.</p>
</blockquote>

Результат.

HTML тег: blockquote

Блок текста, цитируемый из других источников.

Тег q

Элемент <q> используется для выделения в документе коротких цитат. Короткие цитаты берутся в кавычки.

Пример.

Пример <q>короткой цитаты</q>

Результат.

Пример короткой цитаты

Тег cite

Элемент <cite> — ссылка на творческое произведение, такое как книга, веб-сайт или заявление. Он должен включать имя автора, название работы или ссылку на URL.

Пример.

Для написания статьи использовалась книга: <p> Бабаш Александр Владимирович, Шанкин Генрих Петрович<cite> История криптографии</cite>. 2002 год.</p>

Результат.

Для написания статьи использовалась книга:

Бабаш Александр Владимирович, Шанкин Генрих Петрович История криптографии. 2002 год.

Теги ввода, кода и направления

Тег code

Элемент <code> указывает на то, что текст является фрагментом компьютерного кода. Вы уже сталкивались с результат работы этого тега, пример:

<code>display: block;
font-size: 0.83em;
margin-block-start: 1.67em;
margin-block-end: 1.67em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;</code>

Результат.

display: block; font-size: 0.83em; margin-block-start: 1.67em; margin-block-end: 1.67em; margin-inline-start: 0px; margin-inline-end: 0px; font-weight: bold;

Тег kbd

Элемент <kbd> указывает что фрагмент теста введен с клавиатуры.

Пример.

Для запуска диспетчера задач введите: <kbd>ctrl + alt + del</kbd>

Результат.

Для запуска диспетчера задач введите: ctrl + alt + del

Тег samp

Элемент <samp> выделяет пример результата выполнения программы.

Пример.

Если вы выберете опцию «чемпион», вы получите сообщение <samp> Обезьяна не гусеница </samp>

Результат.

Если вы выберете опцию «чемпион», вы получите сообщение Обезьяна не гусеница

Тег var

Элемент <var> задает переменную, например, в математической формуле или в компьютерном коде.

Пример.

Если <var>x</var> = 3 , то <var>y</var> = 6

Результат.

Если x = 3 , то y = 6

Тег pre

Элемент <pre> сохраняет изначальное форматирование текста. При этом пробелы и переносы строк в начальном тексте не удаляются.

Пример.

<pre>Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование</pre>

Результат.

Текст переносится 
без помощи br и иных средств форматирования
он просто             сохраняет исходное 
                  форматирование

Тег bdo

Элемент <bdo> изменяет текущее направление текста.

Пример.

Результатом этого <bdo dir = "rtl"> слова </bdo> будет "аволс".

Результат.

Результатом этого слова будет «аволс».

На этом можно считать что вы изучили текст HTML.

Источник

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

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

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

<html> <head> </head> <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> </body> </html>

Собственно, здесь уже имеются элементы форматирования: тег <h1>, который делает текст внутри тега крупным, более того, это идёт, как заголовок, поэтому дальнейшие элементы располагаются уже под ним. Также мы здесь задали цвет текста (green) в атрибуте text тега <body>.

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

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

Начнём с курсива. Текст будет курсивным, если он находится внутри тега <i>. Поэтому давайте напишем так:

<i>Это курсив</i>

Если Вы запустите браузер, то Вы сможете увидеть текст в виде курсива.

Также текст может быть жирным. Делается это с помощью тега <b>. Например, так:

<b>Это жирное начертание</b>

Также текст можно сделать подчёркнутым. Для этого необходимо использовать тег <u>.

<u>Подчёркнутый текст</u>

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

<i><b>Жирный курсивный текст</b></i>

Также можно записать и так:

<b><i>Жирный курсивный текст</i></b>

Если Вы посмотрите в браузере, то не увидите никакой разницы. Это и логично, ведь какая разница: сначала сделали текст курсивным, а потом жирным, или, наоборот, сначала жирным, а потом курсивным. Суть, думаю, понятна. Единственное правило, но ОЧЕНЬ важное правило — это соблюдать принцип вложенности. То есть сначала закрываются все внутренние теги, и только потом закрываются внешние теги. Таким образом, НЕЛЬЗЯ писать так:

<i><b>Жирный курсивный текст</i></b>

Думаю, понятно, что работать это не будет. Ведь мы не закрыли ещё тег <b>, а уже закрываем тег <i>. Всегда помните о принципе вложенности — это одно из немногих правил HTML, соблюдение которого обязательно!

Теперь поговорим о размере шрифта текста. Изменить размер текста можно с помощью тега <font>, а, точнее, с помощью его атрибута «size«, значение которого и означает размер шрифта. Давайте перейдём на следующую строку с помощью тега <br> и напишем такую строчку:

<font size = "5">Это текст c size = "5"</font>

Обновив страницу в браузере, Вы увидите, что текст стал крупнее, чем раньше. Это и сделал атрибут «size» тега <font>. Чем больше значение атрибута «size«, тем крупнее шрифт, впрочем, думаю, что Вам это очевидно.

Цвет текста можно задавать также с помощью тега <font>, так как у этого тега имеется ещё один атрибут — «color«. Значение данного атрибута может быть любой цвет. Давайте напишем так:

<font size = "5" color = "red">Это увеличенный красный текст</font>

Вот это и были основные способы по изменению внешнего вида текста.

Напоследок, напишем строчку, в которой намешано абсолютно всё, что мы сегодня узнали. Сначала, правда, давайте перейдём на следующую строку, с помощью уже знакомого нам тега <br>. Обратите внимание, что необходимо соблюдать принцип вложенности: пока не закрыт внутренний тег — внешний не закрывается.

<font size = "4" color = "navy"> <b> <i> <u>Это текст, в котором намешано очень многое</u> </i> </b> </font>

Таким образом, код нашей страницы стал таким:

<html> <head> </head> <body text = "green" bgcolor = "yellow"> <h1>Заголовок 1-го уровня</h1> <i>Это курсив</i> <b>Это жирное начертание</b> <u>Подчёркнутый текст</u> <i> <b>Жирный курсивный текст</b> </i> <b> <i>Жирный курсивный текст</i> </b> <br> <font size = "5">Это текст c size = "5"</font> <font size = "5" color = "red">Это увеличенный красный текст</font> <br> <font size = "4" color = "navy"> <b> <i> <u>Это текст, в котором намешано очень многое</u> </i> </b> </font> </body> </html>

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

Всего Вам доброго, увидимся в следующей статье.

С уважением, Михаил Русаков.

P.S. Если Вы хотите узнать больше по HTML, то посмотрите мой бесплатный курс с примером создания сайта на HTML: http://srs.myrusakov.ru/html

Создано 26.04.2010 17:56:24
Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Источник