Топ-100 HTML уроки, 2 часть: правила, стили - Разработка сайтов на WordPress

Некоторые правила и функции HTML

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

Выделение пустых строк и пробелов

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

<p> Абзац с пустой строкой

 

 

и несколько последовательных интервалов </ p>

этот абзац будет отображаться так:

Абзац с пустой строкой и несколько последовательных интервалов

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

Написание комментариев

При написании длинных HTML-страниц полезно прокомментировать, что делают некоторые из более сложных элементов. Короткие и точные комментарии значительно облегчают изучение страницы. Другое использование комментариев – временно исключить часть кода HTML. Если вы хотите увидеть, как будет выглядеть страница без заголовка или абзаца, достаточно обернуть нежелательную часть в теги комментария <!– и –> – комментарии не появляются на экране. Вот пример:

<!– Это комментарий, который не будет выводиться на экране –>

Вложения тегов друг в друга

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

<b> <i> жирная и выделенная курсивом фраза </ i> </ b>

Это будет отображаться в браузере так:

жирная и выделенная курсивом фраза

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

<i> <b> жирная и выделенная курсивом фраза </ b> </ i> – Это также правильный код HTML.

Однако, неправильно закрывать тег, открытый первым:

<I> <b> жирным шрифтом и курсивом </ I> </ b>, а также

<b> <i> жирная и выделенная курсивом фраза </ b> </ i> – неверный код HTML.

Используйте строчные буквы для имен тегов

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

<I> выделенная курсивом фраза </ I> будет интерпретироваться в точности как <i> выделенная курсивом фраза </ i>:

выделенная курсивом фраза

Однако, в более новых вариантах HTML (таких как ХHTML) теги всегда чувствительны к регистру: используйте <i> вместо <I> и т. д.


Стили в HTML

Недавно мы рассмотрели создание текста с тегами, такими как <q>, <em> и <strong>, которые придают некоторый смысл форматированному тексту – кавычки, курсив, зачеркивание, подчеркивание и т. д.

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

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

Фоновый цвет

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

Этот код сделает фон всей страницы желтым:

<body style=”background-color:yellow”>

Вы можете прочитать больше о цветах HTML в разделе цвета HTML.

Шрифт текста

Шрифт задается атрибутом “font-family:“, за которым следует название шрифта. Например:

<p style=”font-family:courier new”> это будет указывать на шрифт пунктов, чтобы использовать Courier New</p>: это будет указывать на шрифт абзаца Courier New.

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

Цвет текста

Задается с помощью атрибута “color:“, за которым следует значение цвета:

  • название цвета, например, красный:
    <p style=”color:red”> таким образом текст в данном абзаце будет красным</p>:

    таким образом текст в данном абзаце будет красным

  • rgb значение, например.
    <p style=”color:rgb(0, 0, 255)”> этот абзац имеет голубой цвет</p>:

    этот абзац имеет голубой цвет

    Установка цвета с помощью rgb (a, b, c) использует 3 числа, выражающие интенсивность одного из трех основных цветов – a для красного, b для зеленого и c для синего соответственно. Числа RGB могут варьироваться от 0 до 255, чем выше число, тем интенсивнее цвет.

  • hex значение, например:
    <p style = “color: #00ff00”> будет означать, что текст в этом абзаце отображается зеленым цветом </ p>:

    будет означать, что текст в этом абзаце отображается зеленым

    Установка цвета с шестнадцатеричным значением аналогична rgb (), за исключением того, что вместо десятичного числа, цифры представлены в шестнадцатеричном формате. Обратите внимание, что при использовании hex, перед числами стоит знак #.

Размер текста

обозначается как “font-size:“, а затем размер в пикселях (px), em, проценты(%) любые другие допустимые способы установки размера:

<p style=”font-size:24px”>Это текст с размером шрифта 24 пикселей</p>выведет на экран:

Это текст с размером шрифта 24 пикселей

Толщина шрифта

Устанавливается с помощью “font-weight:” и сопровождается любым из следующих атрибутов:

  • normal: устанавливает нормальный шрифт, и является значением по умолчанию.
  • bold: определяет жирный текст.
  • bolder: определяет еще более жирный текст.
  • lighter определяет более тонкий текст.
  • 100~900: Вы можете использовать числа 100, 200, 300 и т.д. до 900. 400 соответствует нормальный, а 700 – жирный шрифт.

Подчеркивание в тексте

Это дополнительное оформление внешнего вида текста оформляется тегом “text-decoration:” и дополняется словом:

  • none: снимает выделение, если таковое было. Например, гиперссылки по умолчанию подсвечивается, но мы можем сделать гиперссылку без подчеркивания следующим образом:<a style=”text-decoration:none” href=”https://ravechnost.ru/”>Все возможности интернета в Ваших руках!</a>Гиперссылка будет выглядеть так:
    Все возможности интернета в Ваших руках!
  • overline: подчеркивание над текстом:
    <p style=”text-decoration:overline”>Название</p>выведет на экран

    Название

  • line-through: зачеркивание текста:
    <p style=”text-decoration:line-through”>Название</p> выведет на экран

    Название

  • underline: подчеркивание под текстом:
    <p style=”text-decoration:underline”>Название</p> выведет на экран

    Название

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

Прописные и строчные буквы

Используя тег “text-transform:” вы можете указать должен ли текст быть строчными или заглавными буквами, или третий вариант – начинать каждое слово с заглавного слова (как это принято при написании английских заголовков):

  • lowercase: сделает все буквы строчными
  • uppercase: сделает все буквы ЗАГЛАВНЫМИ
  • capitalize: сделает Первую Букву Каждого Слова Заглавной

Положение текста

Вы можете указать, где разместить текст, с помощью тега “text-align:“, за которым следует:

  • center – для центрирования текста:
    <p style=”text-align:center”>этот текст будет по центру</p>
    будет иметь следующий эффект:

    этот текст будет по центру

  • left – по левому краю (который стоит по умолчанию, так что обычно вам не нужно это писать);
  • right – по правому краю:
    <p style=”text-align:right”>Этот текст будет выровнен справа</p>
    будет иметь следующий эффект:

    Этот текст будет выровнен справа

  • justify – двухстороннее выравнивание

Далее: HTML изображения

VECHNOST
VECHNOST
Наша веб-студия — это то место, где рождаются оригинальные идеи, выдвигаются необычные предложения и находятся совершенно уникальные и, главное, действенные пути решения самых сложных задач! Комплексный подход к проектам: разработка сайтов, поддержка, эффективное продвижение.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Магазин услуг

Pin It on Pinterest

Открыть чат
1
Задать вопрос
Здравствуйте! 👋
У вас возникли вопросы?