HTML Урок 2. Атрибуты.Стили.Форматирование текста.Картинки

Автор: | 10.09.2015
Нет комментариев

 

В этом уроке:

  • Как задаются комментарии в HTML
  • Что такое атрибут
  • Использование стилей.Атрибут style
  • Задний фон
  • Цвет текста
  • Шрифт
  • Размер
  • Выравнивание
  • Форматирование текста
  • Тэг <img>

Комментарии

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

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

Примечание: обратите внимание, что комментарии могут занимать несколько строк. Помните, что все, написанное между символами <!— и —>, даже HTML-код, будет проигнорировано браузером.

<html>
  <body>
 
    <!--Этот комментарий не будет отображен-->
    <p>Обычный абзац</p>
 
  </body>
</html>

  Атрибуты html тегов

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

Пример тега с атрибутом

Как мы видим, атрибуты состоят из пары: имя_атрибута=»значение». Имена атрибутов не чувствительны к регистру символов и могут быть записаны с любым сочетанием строчных и заглавных букв. Значение атрибута может состоять из текста, цифр и других символов (единственным исключением является символ амперсанда (&), его использование запрещено). Дополнительные ограничения на использование различных символов зависят от способа записи значения.

<!-- при указании нескольких атрибутов для одного тега, они должны быть отделены
 друг от друга символом пробела -->
<p атр1="значение" атр2="значение">содержимое</p>
 
<!-- сочетание строчных и заглавных букв в имени атрибута -->
<p АтРибУт1="значение">содержимое</p>

Использование стилей. Атрибут style

Атрибут style — используется для стилизации элементов непосредственно в коде. Цель атрибута style заключается в предоставлении простого способа использования CSS стилей в любом HTML-элементе.

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

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

<html>
  <body style="background-color:Gray;">
 
    <h1>Посмотрите на цвета и стили</h1>
    <p style="font-family:verdana;color:red;">
      Этот текст написан красным цветов с помощью шрифта Verdana.
    </p>
    <p style="font-family:times;color:green;">
      Этот текст написан зеленым цветом с помощью шрифта Times.
    </p>
    <p style="font-size:30px;">Этот текст имеет размер 30 пикселей.</p>
 
  </body>
</html>

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

После демонстрации работы атрибута style предлагаем вам познакомится с самыми распространенными свойствами для стилизации текста

Задний фон background

Задний фон элемента задается с помощью свойства background-color, которое в качестве значения может принимать любое доступное значение цвета (про различные значения цветов смотрите ниже), после свойства обязательно должно идти двоеточие и значение, после значения обязательно ставится точка с запятой, эти правила распространяются на все свойства атрибута style. Если нужно задать несколько свойств стиля для одного элемента, то каждое последующее свойство записывается после «;» предыдущего свойства.

Цвет текста color

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

Определение цвета по названию

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

color: silver;

Итак, чтобы задать цвет таким образом, нужно просто указать его название в качестве значения свойства. При этом не имеет значения, пишите вы названия строчными или прописными буквами, поэтому можно написать silver, Silver или SILVER, и все это будет работать.

Определение цвета через значение, задаваемое сочетанием красного, зеленого и синего

Можно определить цвет, указав сочетание красного, зеленого и синего в определенной пропорции. Допустим, вам нужно задать оранжевый цвет, который состоит из 80% красного, 40% зеленого и 0% синего. Вот как это можно сделать:

color: rgb(80%, 40%, 0%);

Можно также задавать значение красного, зеленого и синего числами от 0 до 255. Например, вместо 80% красного, 40% зеленого и 0% синего можно писать 204 красного, 102 зеленого и 0 синего.

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

color: rgb(204, 102, 0);

Определение цвета через шестнадцатеричный код

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

color: #cc6600;

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

Шрифт

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

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

font-family: Verdana, Geneva, Arial, sans-serif;

Свойство font-family дает возможность задать список предпочтительных шрифтов, которые указываются через запятую. Если имя шрифта состоит из нескольких слов, то такое название следует заключить в двойные кавычки, например: «Courier New».

Пример использования стиля:

font-family: (шрифт без засечек), Arial, Helvetica, sans-serif;

font-family: (шрифт с засечками), «Times New Roman», Times, serif;

font-family: (моноширинный шрифт), «Courier New», Courier, monospaced;

Размер шрифта

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

font-size: medium;

Все доступные ключевые слова, задающие размер, вы можете посмотреть в нашем справочнике по CSS в описании свойства font-size.

Выравнивание

Данный стиль задает выравнивание текста внутри родительского блока. Может иметь значения left, right, center.

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

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

line-height

Данный стиль задает расстояние между строк в текстовом блоке (или, иными словами, изменяет высоту строки текста, еще по умному это называется «интерлиньяж»). Порой шрифт значительно приятнее смотрится при увеличении значения line-height, заданного по умолчанию.

Значение данного свойства задается в процентах (100%, 150% …), множителем (1 —  интерлиньяж по умолчанию, 1.5 — увеличен в полтора раза) или точным значением в пикселах (10px, 1.5 em…).

letter-spacing

Межсимвольное расстояние. Значение данного свойства указывает в единицах длины (пиксели, дюймы, pt), либо относительные единицы — em.

font-weight

При желании сделать текст блока жирным — используйте стиль font-weight:bold. Если вы наоборот хотите убрать жирное выделение — тут все просто font-weight:normal

Попробуйте сами:

<html>
  <body style="background-color: black; color: white;">
 
    <h1 style="font-family: verdana;">Заголовок</h1>
    <p style="font-size: 10px;">Очень маленький размер текста.</p>
    <p style="text-align: right;">Этот текст будет выровнен по правому краю.</p>
    <p style="line-height:100px">Высота строки равна 100px</p>
    <p style="letter-spacing:0.5em">Расстояние между символами</p>
    <p style="font-weight:bold">Жирный текст</p> 
  </body>
</html>

Результат:

Заголовок

Очень маленький размер текста.

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

Высота строки равна 100px

Расстояние между символами

Жирный текст

 Тег <img>

Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src. Если необходимо, то рисунок можно сделать ссылкой на другой файл, поместив тег <img> в контейнер <a>. При этом вокруг изображения отображается рамка, которую можно убрать, добавив атрибут border=»0″ в тег <img>.

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

Синтаксис

HTML <img src=»URL» alt=»альтернативный текст»>
XHTML <img src=»URL» alt=»альтернативный текст» />

Атрибуты

alt — Альтернативный текст для изображения.

width – Ширина изображения.

height – Высота изображения.

Src — Путь к графическому файлу.

Закрывающий тег

Не требуется.

Пример

<img src="images/girl.png" width="189" height="255" alt="Фото моей дочки">

Заключение:

1. Комментарии в HTML задаются следующим образом

<!--   Комментарий в браузере не отображается -->

Они необходимы для собственной метки кода html, что приводит к удобству в работе

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

Пример тега с атрибутом

3. Атрибут style-задает визуальные настройки тэга, например: цвет, размер, отступы и т.д.

Существует большое количество значений атрибутов? каждый из которых несет свой функционал Вот некоторые из них:

<p style="background: yellow;">Желтый фон: background:yellow;</p>
<p style="color: red;">Цвет текста красный: color:red;</p>
<p style="text-align:center;">Расположение текста по центру: text-align:center </p>
<p style="font-family: "Open Sans", sans-serif;">Шрифт font-family: "Open Sans"</p>
<p style="font-size: 18px;">Размер шрифта: font-size:18px</p>
<p style="font-weight: bolder;">Толщина текста: font-weight:bolder</p>
<p style="line-height: 50px;">Высота строки: line-height:50px</p>
<p style="letter-spacing: 0.5em;">Меж символьный интервал: letter-spacing:0.5em</p>
<p style="width: 100px; height: 100px; background: pink;">Ширина: width:100px; высота: height:100px</p>

Желтый фон: background:yellow;

Цвет текста красный: color:red;

Расположение текста по центру: text-align:center

Шрифт font-family: «Open Sans»

Размер шрифта: font-size:18px

Толщина текста: font-weight:bolder

Высота строки: line-height:50px

Меж символьный интервал: letter-spacing:0.5em

Ширина: width:100px; высота: height:100px

4. Тег <img> предназначен для отображения на веб-странице изображений в графическом формате GIF, JPEG или PNG. Адрес файла с картинкой задаётся через атрибут src.

<img src="http://ot7.ru/wp-content/uploads/2015/09/Untitled-6.jpg" alt="паттерн" width="130" height="130" />

паттерн