Атрибуты HTML-тегов. Атрибуты HTML: виды и применение. HTML-справочник колонки, фиксированной ширины

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

вы обозначили абзац. Но как сделать, чтобы он был выровнен по правому краю? Для этого понадобится определённый атрибут с соответствующим значением. Как некоторые теги не имеют пары, так и некоторые атрибуты могут употребляться без значений.

Как писать атрибуты?

Атрибуты - зарезервированные слова (как и теги, только без угловых скобок), значения же их могут быть разными. Так же, как и теги, атрибуты со значениями рекомендуется писать маленькими буквами, хотя браузерам, в общем-то, безразлично - это просто правило хорошего тона: по-русски ведь ТОЖЕ НЕ ПРИНЯТО ПИСАТЬ ПРИ ВКЛЮЧЕННОМ CAPS LOCK. А чем HTML хуже?

Значения с атрибутами записываются в таком формате:

Атрибут=”значение” lang=”en”

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

Абзац

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

Универсальные атрибуты

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

  • accesskey позволяет задать сочетание клавиш для доступа к определённому объекту страницы. Например, вы можете сделать так, чтобы с помощью комбинации клавиш Alt+1 пользователь переходил по определённой ссылке. Таким образом разработать систему клавишной навигации.

В качестве значения атрибута могут выступать цифры 0-9 или буквы латинского алфавита:

Ссылка будет открываться по нажатию сочетания клавиш с единицей

  • class позволяет связать тег с заранее заданным с помощью CSS оформлением. Использование атрибута позволяет существенно уменьшить код, ведь вместо того, чтобы повторять ввод одного и того же блока CSS, можно просто ввести имя соответствующего ему класса.
  • С помощью contenteditable можно разрешить пользователю редактировать любой элемент HTML-страницы: удалять, вставлять, изменять текст. Этот же атрибут даёт возможность редактирование и запретить. Значения имеет всего два: true - правку разрешить, false - запретить.
  • При помощи атрибута contextmenu вы можете наделить любой элемент документа уникальными пунктами контекстного меню на своё усмотрение. Само меню создаётся в теге , а атрибуту contextmenu присваивается его идентификатор.
  • dir определяет направление текста: слева направо (ltr) или справа налево (rtl) .
  • draggable позволяет запретить (false) или разрешить (true) пользователю перетаскивать наделённый этим атрибутом элемент страницы.
  • dropzone указывает браузеру, что делать с перетаскиваемым элементом: копировать (значение copy ), перемещать (move ) или создать на него ссылку (link) .
  • hidden - атрибут, позволяющий скрыть содержимое элемента, чтобы оно не отображалось в браузере. Если атрибуту задано значение false, объект отображается, true - скрывается.
  • id задаёт идентификатор элемента - своего рода имя, которое нужно для простой смены стиля объекта, а также для того, чтобы к нему могли обращаться скрипты. Значением атрибута и будет его имя. Начинаться оно должно обязательно с латинской буквы, и может содержать цифры, буквы всё того же латинского алфавита (большие и маленькие), а также символы дефиса (-) и подчёркивания (_) . Русских букв содержать не может.
  • lang помогает браузеру понять, на каком языке написан контент, и задать ему соответствующий стиль (например, в языках могут использоваться разные кавычки). Значениями выступают коды языков (русский - ru , английский - en и т. п.).
  • spellcheck включает (true) или отключает (false) проверку правописания. Особенно полезно использовать атрибут в тегах полей форм, куда текст будет вводить пользователь.
  • style позволяет задать оформление элемента с помощью CSS-кода.
  • tabindex даёт возможность определить, сколько раз пользователю придётся нажать клавишу Tab, чтобы фокус получил объект с этим атрибутом. Количество нажатий определяет значение атрибута - целое положительное число.
  • title - всплывающая подсказка, которая появится, если подвести мышку к элементу и на некоторое время оставить её неподвижной. Строка в значении и будет подсказкой.
  • translate разрешает (yes) или запрещает (no) перевод содержимого тега.
  • align задаёт выравнивание элемента. Например, с его помощью можно выровнять текст по левому краю (значение left ), по правому краю (right ), по центру (center) или по ширине (justify) . Для изображений (тег ) также доступно выравнивание по верхней границе самого высокого элемента строки (top ), по нижней границе (bottom) , а значение middle делает так, что средняя линия картинки совпадает с базовой линией строки.

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

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

В качестве примера рассмотрим строку HTML-кода:

Этот текст можно редактировать

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

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

- открывающий тег контейнера, хранящего абзац.

- закрывающий тег.

Между символами > и < расположен текст Этот текст можно редактировать. Это - надпись вне тегов (между ними), а значит она будет видна открывшему страницу пользователю. Браузер воспринимает её как простой текст, который надо вывести на экран.

contenteditable =”true ” - это и есть атрибут и его значение. Помните, как в школе: x=3. Так и здесь: contenteditable =”true ”. Атрибут contenteditable задаёт, сможет ли пользователь редактировать содержимое элемента, значение true , написанное в кавычках через знак равно, редактирование разрешает:

Атрибут=”значение” contenteditable=”true”

Описание

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

Синтаксис

float: left | right | none | inherit

Значения

left Выравнивает элемент по левому краю, а все остальные элементы, вроде текста, обтекают его по правой стороне. right Выравнивает элемент по правому краю, а все остальные элементы обтекают его по левой стороне. none Обтекание элемента не задается. inherit Наследует значение родителя.

HTML5 CSS 2.1 IE 9 Cr 15 Op 11 Sa 5 Fx 8

float

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Duis autem dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit au gue duis dolore te feugat nulla facilisi.

Результат данного примера показан на рис. 1.

Рис. 1. Применение свойства float

Объектная модель

document.getElementById("elementID ").style.styleFloat

document.getElementById("elementID ").style.cssFloat

Браузеры

В браузере Internet Explorer 6 наблюдается ошибка с удвоением значения левого или правого отступа для плавающих элементов, вложенных в родительские элементы. Удваивается тот отступ, который прилегает к стороне родителя. Проблема обычно решается добавлением display: inline для плавающего элемента. Также в этом браузере добавляется отступ 3px (так называемый «трехпиксельный баг») в направлении, заданном значением float .

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit .

Приветствую Вас, уважаемые читатели блога сайт. Сегодня мы продолжим изучать CSS и рассмотрим правила float и clear, имеющие важное значение при блочной верстке сайтов.

Создание плавающих контейнеров при помощи float

Изначально элементы веб-страницы располагаются на ней друг за другом, в том порядке, в котором определены в html-коде. Размещая в коде теги абзацев, заголовков, списков и др. на странице мы видим их в том же порядке. Но при помощи некоторых атрибутов css мы можем изменить этот порядок. Один из них float.

Правило float позволяет нам создавать так называемые . То есть мы можем установить для блочного элемента выравнивание по левому или правому краю родительского элемента (блочного контейнера, в который он вложен, или самой Web-страницы). При этом блочный элемент будет прижиматься к соответствующему краю родителя, а остальное содержимое будет обтекать его с противоположной стороны. Подобное мы уже видели в чистом html, когда рассматривали атрибут align со значениями left и right для тега img, который используется для .

У этого правила может быть три возможных значения:

float: left|right|none|inherit

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

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

Рассмотрим два блочных элемента. Для начала просто подсветим их :


Содержимое первого блочного элемента

Как видим, первый div стал выравниваться по левому краю, а содержимое соседнего элемента сало обтекать его по правой стороне.

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

Давайте к предыдущему примеры добавим элемент span и в стилях пропишем для него размеры:

Содержимое первого блочного элемента

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

Теперь добавим элементу span правило float со значением left:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

Теперь элемент span приобрел размеры в соответствии с правилами css, а соседние элементы стали обтекать его с правой стороны. Из этого можно сделать вывод, что правило float можно применять как к строчным, так и к блочным элементам . Причем не зависимо от того к какому элементу применяется правило, он становится блочным.

А что если задать одинаковое значение атрибута стиля float для нескольких следующих друг за другом элементов? Давайте посмотрим:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

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

Остается заметить, что правило float применяется при блочной верстке, основанной на плавающих контейнерах . При применении такого дизайна часто приходится помещать какие-либо элементы ниже тех, что были выровнены по левому или правому краю. Если просто убрать у них правило стиля float или задать для него значение none, результат будет непредсказуемым. В этом случае на помощь приходит правило clear.

Правило Clear

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

clear: left|right|both|none|inherit

При clear равном left элемент располагается ниже всех элементов, для которых у свойства float задано значение left. Если clear равно right, то отменяется обтекание по правой стороне. И both отменяет обтекание по обеим сторонам элемента. Значение none отменяет действие правила clear и это значение по умолчанию.

Добавим в предыдущем примере, для первого блока div правило clear:left:

Содержимое строчного элемента span

Содержимое первого блочного элемента

Содержимое второго блочного элемента

С помощью этого правила мы заставили блок div проигнорировать плавающий элемент слева от него.

Блочная верстка — создание колоночного макета с помощью float

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

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





  • Главная

  • Устройство автомобиля

  • О сайте

  • Контакты



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


Научным языком автомобиль это:


Механическое моторное безрельсовое дорожное транспортное средство минимум с 4 колёсами.



Классификация автомобилей


Автомобили бывают следующих типов:



  • Легковой;

  • Грузовой;

  • Внедорожник;

  • Багги;

  • Пикап;

  • Спортивный;

  • Гоночный.




Итак, мы выделили в отдельные блоки шапку (id="header"), левую колонку (id="leftbar"), область контента (id="content") и подвал (id="footer"). Перед блоками, которые должны располагаться ниже своих предшествующих соседей я поместил пустые контейнеры с атрибутом class="clr". И вот так этот html-код будет отображаться в браузере:

Как видно на рисунке, блоки выстроились по порядку сверху вниз. Блоки создали, теперь пропишем css стили для них (зададим для блока leftbar правило float, ограничим ширину leftbar-а и content-a и зададим фон для блоков):

Clr{
clear:both;
}
#leftbar{

Width:250px;
background:#E6EDF1;
}
#content{
width:750px;
background:#fff;
}
#footer{
background:#314451;
color:#fff;
text-align:center;
}

И смотрим, что получилось:

Видим, что благодаря правилу float:left блок leftbar стал плавать и содержимое блока content как бы обтекает его. Для того, чтобы этого не происходило зададим для блока content внешний отступ с помощью правила margin-left на 10 пикселей больше чем ширина блока leftbar:

#content{
width:750px;
background:#fff;
margin-left:260px;
}

И смотрим:

В итоге получили двух-колоночный макет сайта .

Итак, подведем итоги. В данной статье мы рассмотрели два css свойства, которые лежат в основе блочной верстки :

  1. float — с помощью него создаются плавающие элементы и появляется возможность выстраивать блоки рядом друг с другом;
  2. clear — отменяет действие float для соседних с плавающими блоками элементов.

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

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

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

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

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

Строка

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

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

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

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

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

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

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

Адрес

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

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

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

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

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

Ссылка

Google

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

Google

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

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

Относительные адреса указываются от корня сайта или текущего документа. Например, код означает загрузить графический файл с именем 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/ работают только под управлением веб-сервера и на локальном компьютере не применимы.

Ссылки

Посмотрите на мою фотографию!

Как сделать такое же фото?

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

Числа

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

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

Числа

Температура воды

Низкая Нормальная Горячая Кипяток

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

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

input, атрибут max

Укажите вашу температуру в градусах:

Проценты

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

Элемент располагается внутри

Поэтому элемент

Будет родителем для . Верно и обратное - элемент является дочерним по отношению к

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

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

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

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

Изображение

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

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

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

Код языка

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

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

lang

Фраза на французском

Je n"ai pas mangé depuis six jours

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

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

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

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

Использование параметра float

Чтобы расположить два слоя рядом друг с другом по горизонтали, воспользуемся стилевым параметром float со значением left . Этот элемент говорит, что слой необходимо выровнять по левоой стороне и обтекать его по правой стороне. Таким образом, рядом лежащий второй слой будет пристыкован к первому справа.

Теоретически, параметр float дастаткова задавать лишь для одного слоя из двух. Однако браузер Internet Эксплорер в этом случае между слоями добавляет небольшой промежуток, что не всегда желательно, а Файер фох накладывает слои друг на друга. Чтобы все смотрелось именно так, как хочется, float следует указывать для всех слоев (пример 1).

Пример 1. Добавление параметра float





Две колонки


...

...


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

Главной особенностью приведенного подхода является тот момент, что при уменьшении окна браузера до 750 пикселов и меньше, слои располагаются по вертикали друг под другом (рис. 1). Иными словами, макет «рассыпается» на отдельные блоки.

Рис. 1. Вид макета при уменьшении размера окна браузера

Чтобы подобная ситуация не происходила, следует применить параметром margin .

Добавление параметра margin для разработки двухколонного макета

Опять воспользуемся параметром float , чтобы расположить колонки рядом, но добавим его только для первого слоя. При этом в стиле второго слоя следует установить параметр margin-left , значение которого равно ширине левой колонки. Но здесь есть одна хитрость — ширину правой колонки задавать нельзя, потому что это приведет к переносу блоков в браузере Internet Эксплорер при уменьшении окна браузера. А именно этого мы стараемся избежать. Поэтому общую ширину макета установим с помощью еще одного слоя, назовем его container, а остальные слои будут располагаться внутри него (пример 2). В этом случае ширину правой колонки можно не задавать, поскольку она будет занимать все доступное пространство.

Пример 2. Двухколонный макет





Две колонки






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

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

Пример 3. Применение параметра clear





Две колонки


...

...

...


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

с тегом clear: left . Значение этого параметра обычно совпадает со значением float .

Резюме

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

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