Lesson 6 of12

In Progress

← Previous

Значения атрибутов

04.05.2022

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

Ключевое слово

У некоторых атрибутов есть зарезервированные значения, которые называются «ключевые слова». К примеру, значение атрибута type элемента <input> определяет тип элемента формы. Ниже элемент <input> создаёт кнопку.

<input type="button" value="Кнопка">

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

Строка

Строка представляет собой текст, заключённый в двойные или одинарные кавычки.

<div title="Строка текста"></div>
<div title='Строка текста'></div>

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

<div title="Новый 30" монитор"></div>

Чтобы корректно написать строку с внутренними кавычками есть несколько вариантов.

1. Экранировать внутреннюю кавычку вот таким образом — \”. В таком случае она уже не будет восприниматься браузером как кавычка, а считается символом.

<div title="Новый 30\" монитор"></div>

2. Использовать сочетание одинарных и двойных кавычек.

<div title='Новый 30" монитор'></div>

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

Всё это аналогичным образом работает и для одинарных кавычек.

Адрес

Адресом называется путь к документу, например, к графическому файлу. Адрес необходим в тех случаях, когда делается ссылка на сайт, другую веб-страницу или загружается определённый файл. Например, в элементе <img> адрес используется в качестве значения атрибута src, он задаёт путь к файлу с изображением.

Различают абсолютные и относительные адреса.

Абсолютные адреса

Подобные адреса работают везде и всюду независимо от имени сайта или веб-страницы, где задан адрес и начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol, протокол передачи гипертекста), соответственно, абсолютные адреса начинаются с ключевого слова http://. В примере 1 приведена ссылка, в которой применяется абсолютный адрес.

Пример 1. Использование абсолютного адреса в ссылке

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылка</title>
 </head>
 <body>
  <p><a href="http://google.com">Google</a></p>
 </body>
</html>

В данном примере текстовая ссылка ведёт на сайт google.com.

Кроме протокола HTTP существует и защищённый протокол HTTPS. Не всегда очевидно, какой протокол используется на сайте, поэтому в адресе ссылки его можно вообще опустить. Адрес в таком случае запишется так:

<a href="//google.com">Google</a>

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

Относительные адреса

Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src=”pic.png”> означает загрузить графический файл с именем pic.png, который располагается в той же папке, что и сама веб-страница. Далее рассмотрим несколько примеров таких адресов.

/
Адрес указывает обычно на файл index.html, который находится в корне сайта. Если файл index.html отсутствует, браузер, как правило, показывает список файлов, находящихся в данном каталоге. Имя файла не обязательно должно быть index.html, этот параметр меняется через настройки веб-сервера — так называется программа, которая анализирует приходящие от браузера запросы и передаёт ему документы, показываемые пользователю.

/images/pic.png
Черта (/) перед адресом говорит о том, что адресация начинается от корня сайта. Ссылка ведёт на файл pic.png, который располагается в папке images. А та в свою очередь размещена в корне сайта.

../help/me.html
Две точки перед именем указывают браузеру перейти на уровень выше в списке папок сайта и там «поискать» в папке help файл с именем me.html.

manual/info.html
Если перед именем папки нет никаких дополнительных символов, вроде точек или черты, то папка размещена внутри текущей папки, а уже в ней находится файл info.html.

Адреса относительно корня сайта вроде /demo/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

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

Пример 2. Относительные адреса в ссылках

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Ссылки</title>
 </head>
 <body>
  <p><a href="image/xxx.jpg">Посмотрите на мою фотографию!</a></p>
  <p><a href="page/tip.html">Как сделать такое же фото?</a></p>
 </body>
</html>

Иногда можно встретить адреса в виде ./file/doc.html. Точка впереди означает, что отсчёт ведётся от текущей папки. Подобная запись избыточна и её можно сократить до file/doc.html.

Числа

Числа состоят из цифр от 0 до 9; для отрицательных чисел, если они необходимы, впереди ставится знак минус (-45). В примере 3 показано использование чисел в качестве значений атрибутов.

Пример 3. Использование чисел

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Числа</title>
 </head>
 <body>
  <p>Температура воды</p>
  <meter value="0" max="100" low="10" high="60">Низкая</meter>
  <meter value="30" max="100" low="10" high="60">Нормальная</meter>
  <meter value="80" max="100" low="10" high="60">Горячая</meter>
  <meter value="100" max="100">Кипяток</meter>
 </body>
</html>

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

Пример 4. Дробные числа

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>input, атрибут max</title>
 </head>
 <body> 
  <form>
   <p>Укажите вашу температуру в градусах: 
   <input type="number" min="35" max="41" value="36.6" step="0.1"></p>
  </form> 
 </body>
</html>

Проценты

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

<p><img src="figure.jpg" alt="" width="50%"></p>

Элемент <img> располагается внутри <p>, поэтому элемент <p> будет родителем для <img>. Верно и обратное — элемент <img> является дочерним по отношению к <p>. Соответственно, в данном случае ширина картинки в процентах считается от родительского абзаца, который по умолчанию занимает всё свободное пространство окна по ширине.

Браузер понимает, что речь идёт именно о процентах, если после числа добавляется символ %, например: width=”40%”.

В примере 5 приведён код веб-страницы, в котором ширина картинки указывается в процентах.

Пример 5. Размеры изображения в процентах

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Изображение</title>
 </head>
 <body>
  <p><img src="image/winnie.png" alt="Винни-Пух в гостях у Кролика" width="100%"></p>
 </body>
</html>

Результат данного примера показан на рис. 1. Ширина изображения задана как 100%, поэтому занимает всю доступную ширину окна браузера. Высота при этом не указана и вычисляется браузером автоматически.

Рис. 1. Размер картинки в процентах

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

Код языка

Мы живём в эпоху глобализации, когда на сайтах встречаются тексты на разных языках. Чтобы показать поисковым системам, на каком языке написан текст и задать свои настройки для разных языков (типы кавычек, к примеру) и указывается язык текста в виде кода. Для задания языка применяется атрибут lang (пример 6).

Пример 6. Использование атрибута lang

<!DOCTYPE html>
<html lang="ru">
 <head>
  <meta charset="utf-8">
  <title>lang</title>
 </head>
 <body>
  <p>Фраза на французском</p>
  <p lang="fr">Je n'ai pas mangé depuis six jours</p>
 </body>
</html>

В данном примере для всей страницы указан русский язык с помощью атрибута lang со значением ru. Чтобы показать, что язык относится ко всей странице, атрибут добавлен к элементу <html>. Для текста на французском атрибут lang со значением fr добавлен к элементу <p>.

Допустимые значения атрибута lang вы можете посмотреть на этой странице.

Lesson Content

Значения атрибутов Тест

Основы HTML

Participants 286