В прошлой статье я вам рассказывал про , как ими пользоваться и т.д. А сегодня я вам расскажу о еще одной неотъемлемой части в сайтостроении, а именно про атрибуты тегов html. И конечно же по традиции мы рассмотрим их на живых примерах и испробуем это на нашем сайте с Лукоморьем, который мы заманьячили в прошлой статье.
Атрибут — это специальное дополнение к тегу, которое расширяет его возможности и может менять свойства содержимого. И если тег всегда фиксированный, то атрибут может иметь множество значений. Например, в теге мы можем поставить атрибуты цвета текста, его размера, шрифта и т.д. Но фонт мы подробнее рассмотрим в другой статье.
Различают универсальные и неуниверсальные атрибуты. Универсальные подходят практически для любых тегов, а неуниверсальные подходят для одного или нескольких, но далеко не для всех...
Атрибут записывается внутри тега после его значения, но до закрывающей угловой скобки. Сначала ставится сам атрибут, затем знак равенства, а потом само значение в кавычках. Выглядит это так:
Что следует из этого примера? Мы открыли абзац, и внутри тега поставили атрибут align, который отвечает за выравнивание текста. Далее мы проставили знак «=», который означает, что мы присваиваем значение этому атрибуту. Далее в кавычках мы пишем это самое значение. В данном случае это «center» . Это означает, что текст в данном (и только в данном!) абзаце мы выровняем по центру. Попробуйте сами.
Но не забывайте заглядывать на сайт htmlbook . Там вы точно найдете что чему соответствует. Это просто настольный справочник для любого веб-разработчика, а тем более для начинающего.
Как вы уже поняли, этот атрибут означает выравнивание текста. Ставится он обычно в тех тегах, которые отвечают за сам контент (текст, картинки и т.д.). В общем его можете ставить в заголовках (
), картинках , блочный элемент (
Возможные значения атрибутов:
Попробуйте попрактиковаться и посмотрите как будет меняться расположение ваших элементов.
Знакомое название, правда? Действительно. Есть такой тег, и мы его ставим между и . Но сейчас я говорю именно об атрибуте, и подходит он практически к любому тегу, так как является универсальным. А нужен он в качестве подсказки при наведении. И суть состоит в том, что вы сами пишите эту подсказку. Выглядит это примерно так:
Сколько будет 5-3?
Что мы тут видим? В начале открываем абзац, потом прописываем сам атрибут и даем ему значение «Ну что ты тупишь? Будет 2». Далее пишем отображаемый текст, ну и в конце закрываем тег
.Что после этого произойдет? Сохраните документ и сами увидите. При наведении на текст курсором должна появиться всплывающая подсказочка.
В одном теге может находиться сколько угодно атрибутов. Главное, чтобы они соответствовали данной метке. Вот вам пример:
Содержимое
Как видите тут все довольно просто, просто в одном теге нужно писать все атрибуты через пробел. Из данного примера мы видим, что содержимое будет выравнено по правому краю, и при наведении на него курсором мышки нам всплывет подсказка. Всё просто. Надеюсь, всё понятно?
Ну а теперь давайте вернемся к нашему Лукоморью, которое мы делали на прошлом занятии.
Если у вас нету выполненного файла из предыдущего занятия, то возьмите его и проставьте все нужные атрибуты, чтобы получилось всё по заданию.
И по традиции в начале всё сделайте сами. А если не получится, то смотрите действия, которые я написал ниже.
После этого сохраняем html-документ и запускаем его. Проверяем, что у нас получилось. Всё правильно? Я думаю, что у вас всё должно получиться. Но всё таки я чувствую, что многие из вас задолбались проставлять атрибуты в каждом четверостишии. Я вам покажу, как этот процесс облегчить.
Если вам нужно ставить один и тот же атрибут к какому-то большому отрезку, то в этом нам поможет тег . DIV — это просто пустой блочный элемент, который служит некоторым контейнером для объединения. Сюда можно запихнуть различные атрибуты с цель применения к общему фрагменту. А уж если вы вообще хотите применить атрибут ко всему документу, то его вообще можно прописать в основной тег .
В общем в этом случае вам можно не ставить в каждый тег атрибут align="center"
. Вам лишь нужно нужно поставить
Ну как? Разобрались в общем принципе? Просто дальше мы будем изучать еще больше. Главное, чтобы вы поняли сам принцип расстановки тегов и атрибутов. В случае чего задавайте свои вопросы. Буду рад на них ответить.
Ну а для полноценного обучения принципа созданиям сайта рекомендую к просмотру отличный видеокурс "HTML5 и CSS3 с нуля до профи ". Там вы изучите HTML, CSS, научитесь верстать сайты-визитки, блоги и даже интернет-магазины. Курс просто офигительный для начинающего веб-разработчика.
Ну а я на сегодня заканчиваю. Надеюсь, что статья вам понравилась и была для вас полезной. Не забудьте подписаться на обновления моего блога, чтобы всегда быть в курсе всего самого интересного и не пропустить новых уроков. Ну а я с вами на сегодня прощаюсь. Желаю вам успехов в освоении материала. Пока-пока!
С уважением, Дмитрий Костин.
Кроме использования стандартных размеров и начертаний (гарнитуры) шрифтов, можно определять шрифты для каждого текстового фрагмента с помощью специальных тегов. Самый простой способ - использование так называемых физических стилей :
Для каждого тега физического стиля существует соответствующий закрывающий
тег, который отменяет дальнейшее применение стиля. Например, для тега
закрывающим тегом является
.
Ниже приведен пример программы и внешний вид различных физических стилей:
<НЕАD><ТIТLЕ>Физические стили ТIТLЕ>НЕАD>
<В>ПолужирныйВ>
Курсив
Подчеркнутый
Вычеркнутый
<ТТ>Пишущая машинкаТТ>
<ВХ1>Полужирный курсивВ>
<ВХ1><и>Полужирный курсив подчеркнутый В>
Рис. 649. Физические стили
Внутри тега заголовка можно вставить тег физического стиля, чтобы модифицировать весь заголовок или только некоторую его часть. Например, чтобы выделить курсивом часть текста, определенного в качестве заголовка, можно использовать следующую конструкцию:
<НЕАD><ТIТLЕ>Физические и логические стили ТIТLЕ>
НЕАD>
<Н2>Это - модифицированный
заголовок 2-го уровняН2>
Рис. 650. Изменение стиля шрифта части заголовка
С помощью специального тега
можно настроить шрифт для изображения текста: задать гарнитуру, размер
и цвет. Прежде всего, вы можете установить размер основного шрифта, который
используется в документе по умолчанию. тег основного шрифта имеет формат
тег
Для задания гарнитуры шрифта используется тег
. Например:
Если этот тег не используется в вашем документе, то браузер будет применять
шрифт, установленный в его настройке. Поэтому текст на экране пользователя
может выглядеть совсем не так, как вы его представляли. Следует также
иметь в виду, что если назначенный вами шрифт не установлен на компьютере
пользователя, то браузер будет изображать текст шрифтом, установленным
по умолчанию.
Вы можете в теге
указать через
запятую перечень шрифтов. В этом случае браузер будет использовать первый
найденный шрифт. Например, можно записать тег:
FACE="Arial, Sans Serif, Courier">
Обычно в перечне задают похожие шрифты. Рекомендуется назначать наиболее
популярные шрифты. При размещении на странице текстовой информации лучше
вообще не назначать название шрифта, полагаясь на стандартные настройки
браузера. Но тогда при разработке страницы следует также использовать
стандартные настройки браузера, чтобы синхронизировать свое восприятие
текста с возможным восприятием пользователя. В конце концов, вы создаете
страницу не для себя, а для читателей.
С помощью атрибута COLOR в теге
можно задать цвет шрифта:
Аргумент атрибута COLOR представляет собой шестнадцатеричную запись кода цвета (красной, зеленой и синей составляющей, иначе говоря, RGB-составляющей). Следующая программа демонстрирует управление шрифтом:
<НЕАD><ТIТLЕ>Установка шрифтовТIТLE/НЕАD>
<Р>Шрифт Aria АБВГДЕЖЗИК
<Р>Шрифт CourierАБВГДЕЖЗИК
<Р>Шрифт SYMBOLАБВГДЕЖЗИК
Рис. 651. Использование различных шрифтов
Заметим, что в теге можно использовать несколько или все его возможные атрибуты. Например:
В математических формулах, а также для подстрочных замечаний часто применяются индексы, которые отличаются от основного текста положением (чуть выше или ниже) и размером. Для этой цели служат теги и соответственно для верхних и нижних индексов.
<НЕАD><Т1ТLЕ>ИндексыТIТLЕ> /НЕАD>
<НЗ>Пример использования индексов
<Р> (5+x2)x+3
a1 + a2+ a3
<Р>Подстрочные примечания 2
Рис. 832. Использование верхних и нижних индексов
Кроме рассмотренных выше, имеются дополнительные теги форматирования текстов:
,
- запись текстов
программ, символьных констант;В последних трех стилях используется моноширинный шрифт (обычно Courier).
Например, буквы I и Ж моноширинного шрифта занимают одинаковое место.
Использование моноширинных шрифтов обусловлено простой возможностью выравнивания
текста с помощью символов «пробел».
Отметим еще один момент. В теги управления шрифтом, как и в теги логических
стилей, можно вставлять атрибут ТITLE= "строка"
,
что позволяет привязать к тексту внутри этого тега всплывающую подсказку.
Аргументом атрибута TITLE
является строка
подсказки. При остановке указателя мыши на выделенном слове или фразе
около указателя появится подсказка. С помощью этого приема можно расшифровывать
аббревиатуры, давать дополнительные пояснения и рекомендации пользователю.
Тег FONT представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Синтаксис
Текст
Закрывающий тег
Обязателен.
Параметры
color
- цвет текста.
face
- шрифт текста.
size
- размер шрифта.
Пример 1. Использование тега FONT
Первая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах.
Результат
П ервая буква этого предложения будет написана шрифтом Arial, красным цветом и увеличенной в размерах.
Описание
Устанавливает цвет текста внутри контейнера FONT.
Синтаксис
...
Аргументы
Для задания цветов применяется два способа: первый использует обозначения цветов в шестнадцатеричном коде, а второй - по названию некоторых цветов. Преимущественно используется способ, основанный на шестнадцатеричной системе исчисления, как наиболее универсальный. Десятичная система, хотя и более привычна для представления, находит применение только с помощью CSS.
Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. В таблице приведено соответствие десятичных и шестнадцатеричных чисел.
Десятичные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 |
Шестнадцатеричные | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | A | B | C | D | E | F |
Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999.
Типичный цвет выглядит следующим образом.
#FA8E47 >Текст
Цвет фона задан как #FA8E47. Символ решетки # перед числом означает, что оно шестнадцатеричное. Первые две цифры (FA ) определяют красную составляющую цвета, цифры с третьей по четвертую (8E ) - зеленую, а последние две цифры (47 ) - синюю. В итоге получится такой цвет.
FA | + | 8E | + | 47 | = | FA8E47 |
Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF, что в итоге образует 256 оттенков. Таким образом, в модели RGB количество цветом может быть 256 х 256 х 256 = 16.777.216 комбинаций.
Аналог CSS
color
Значение по умолчанию
Цвет, установленный в браузере по умолчанию.
Пример 2. Цвет фона текста
Результат
Описание
Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
Синтаксис
...
Аргументы
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства шрифтов:
serif
- шрифты с засечками (антиквенные), типа Times;
sans-serif
- рубленные шрифты (шрифты без засечек или гротески), типичный представитель - Arial;
cursive
- курсивные шрифты;
fantasy
- декоративные шрифты;
monospace
- моноширинные шрифты, ширина каждого символа в таком семействе одинакова.
Аналог CSS
font-family
Значение по умолчанию
Шрифт, установленный в браузере по умолчанию.
Пример 3. Изменение шрифта
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Результат
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Описание
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size=4), так и относительной (например, size=+1, size=-1). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size, но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.
Синтаксис
...
Аргументы
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.
Аналог CSS
font-size
Значение по умолчанию
3
Пример 4. Размер текста
Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
Результат
Шрифт размера 1
Шрифт размера 2
Шрифт размера 3
Шрифт размера 4
Шрифт размера 5
Шрифт размера 6
Шрифт размера 7
Браузер | Internet Explorer | Netscape | Opera | Safari | Mozilla | Firefox | |||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Версия | 5.5 | 6.0 | 7.0 | 6.0 | 7.0 | 8.0 | 7.0 | 8.0 | 9.0 | 1.0 | 1.7 | 1.0 | 2.0 |
Поддерживается | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да | Да |
Тег представляет собой контейнер для изменения характеристик шрифта, таких как размер, цвет и гарнитура. Хотя этот тег до сих пор поддерживается всеми браузерами, он считается устаревшим и от его использования рекомендуется отказаться в пользу стилей.
Текст
Обязателен.
Пример 1. Использование тега
Первая буква этого предложения написана шрифтом Arial, выделена красным цветом и увеличена в размерах.
Устанавливает цвет текста внутри контейнера .
...
Значение цвета можно задавать двумя способами.
Браузеры поддерживают некоторые цвета по их названию.
Для задания цветов используются числа в шестнадцатеричном коде. Шестнадцатеричная система, в отличие от десятичной системы, базируется, как следует из ее названия, на числе 16. Цифры будут следующие: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цифры от 10 до 15 заменены латинскими буквами. Числа больше 15 в шестнадцатеричной системе образуются объединением двух чисел в одно. Например, числу 255 в десятичной системе соответствует число FF в шестнадцатеричной системе. Чтобы не возникало путаницы в определении системы счисления, перед шестнадцатеричным числом ставят символ решетки #, например #666999. Каждый из трех цветов - красный, зеленый и синий - может принимать значения от 00 до FF. Таким образом, обозначение цвета разбивается на три составляющие #rrggbb, где первые два символа отмечают красную компоненту цвета, два средних - зеленую, а два последних - синюю.
Цвет, установленный в браузере по умолчанию.
Параметр face служит для задания гарнитуры шрифтов, использующихся для текста. Названий шрифтов можно привести несколько, через запятую. В этом случае, если первый указанный шрифт не будет найден, браузер станет использовать следующий по списку.
...
Любое количество имен шрифтов разделенных запятыми. Универсальные семейства
шрифтов:
serif
- шрифты с засечками (антиквенные),
типа Times;
sans-serif
- рубленные шрифты (шрифты без
засечек или гротески), типичный представитель - Arial;
cursive
- курсивные шрифты;
fantasy
- декоративные шрифты;
monospace
- моноширинные шрифты, ширина каждого
символа в таком семействе одинакова.
Шрифт, установленный в браузере по умолчанию.
Ззадает размер шрифта в условных единицах от 1 до 7. Средний размер, используемый по умолчанию принят 3. Размер шрифта можно указывать как абсолютной величиной (например, size="4" ), так и относительной (например, size="+1" , size="-1" ). В последнем случае размер изменяется относительно базового. На размер шрифта влияет не только заданный параметр size , но и выбор гарнитуры шрифта. Так, шрифт Arial выглядит крупнее, чем шрифт Times, а шрифт Verdana чуть больше шрифта Arial. Учитывайте эту особенность при выборе шрифта и его размеров.
...
Целое число от 1 до 7 или изменение значения в большую или меньшую сторону с помощью символов + и -.
Сегодня продолжим рассмотрение различных тэгов, а именно Font, Blockquote, Pre, Strong, Em, B, I и других, позволяющих осуществлять форматирование текста.
Раньше(еще до появления CSS) тег цитаты Blockquote в Html коде использовался довольно часто, потому что фрагмент текста, заключенный в него, получал горизонтальный отступ, что было не так-то просто сделать в то время в силу невозможности использования CSS свойств. Элемент Blockquote является парным и внутри него могут находиться как строчные теги, так и блочные (например, абзацы P).
Пример
Пример, заключенный в Blockquote
Сейчас тег Blockquote по-прежнему используется при оформлении текста, но внешний вид цитат в наше время уже обычно задается с помощью CSS свойств, прописанных именно для него в файле с таблицами стилей вашего шаблона оформления. Например, в случае моего блога, в style.css можно найти следующие строки:
#content blockquote{margin:15px 0 20px 0;padding:5px 8px 5px 35px;background:#eaedf0 url(images/quote2.png) no-repeat left top;background-position:8px 5px;color:#666;font-size:14px;width:91%;font-style:italic;} #content blockquote p{color:#666;font-size:14px;}
Ну, а то, как будут при этом выглядеть цитататы, заключенные в Blockquote, вы можете увидеть в тексте статьи с интервью с руководителем .
Кроме цитаты в Html раньше (до появления CSS) довольно широко использовался еще один тег форматирования — Center . Он является парным (своеобразный контейнер) и блочным. В нем можно заключать любые элементы текста (как строчные, так и блочные), которые в результате сего действа будут выровнены по центру.
Так, теперь давайте рассмотрим тэг Pre , который позволяет передать форматирование текста заданное непосредственно в исходном коде. Помните я говорил, что все идущие подряд в (пробел, табуляция и перенос строки) будут при разборе кода в браузере заменены одним единственным пробелом.
Так вот, элемент Pre запрещает сокращение пробельных символов в участке текста, который будет в него заключен. Что примечательно, для фрагмента, заключенного в Pre, браузер не будет осуществлять автоматический перенос строк по пробельным символам.
Т.е. все строки внутри элемента Pre будут считаться браузером неразрывными — как вы написали в коде, так и будет отображаться в браузере. Причем, в обозревателе для отображения участка текста, отформатированного с помощью тега Pre, будет использоваться моноширинный шрифт, типа Courier New или подобные ему.
Форматирование в исходном коде тэг Pre теги устаревшие
Сам тэг Pre является блочным, а внутри него (этот тег парный) может быть заключен только строчный контент (т.е. внутри него не следует размещать абзацы P, заголовков H1 — H6 и т.п.).
В Html есть еще один блочный тэг, который предназначен для форматирования текста — Address. Внутри этого тега может располагаться по стандартам валидатора только строчный контент, который будет отображен в браузере курсивом.
Если бы сейчас не существовало CSS, то я должен был бы описать назначение тех или иных тегов логического и физического (визуального) форматирования текста. Но, т.к. CSS сейчас уже используется на подавляющем большинстве сайтов, то роль подобных тэгов в Html коде уже практически сведена к нулю, поэтому я лишь быстро пробегусь по ним и объясню для чего они использовались раньше (а некоторые используются и сейчас).
Визуальные теги предназначены для изменения начертания текста, которое будет видно посетителям вашего сайта, но которому не должны уделять какое-то особое внимание поисковые системы.
Логические же теги форматирования текста, по идее, ориентированы для указания каких-либо акцентов поисковым машинам . Для пользователя выделение этими элементами тоже будет изменять внешний вид выделенных слов.
Если вы помните, то не так уж давно оптимизаторам советовали выделять значимые места с ключевыми словами (как нужно выделять ) тегами логического форматирования Strong и EM, которые для пользователя будут выглядеть как обычное выделение жирным и курсивом.
А вот для выделений без ключевых слов советовали использовать Html элементы «B» и «I», которые для пользователей опять же выглядели бы тоже как выделение жирным и курсивом, но уже поисковыми машинами не учитывались, т.к. они не являются тэгами логического форматирования.
Сейчас все это уже практически не работает так, как задумывалось, и выделение ключевых слов с помощью Strong и EM мы делаем скорее по привычке, нежели действительно надеясь на определенные дивиденды за это со стороны поисковых систем.
Итак, кроме уже упомянутых «B» и «I» (выделение жирным и курсивом) к разряду визуального форматирования можно отнести уже рассмотренные в начале статьи Font, Pre, а также теги:
Ну, а теперь давайте рассмотрим перечень элементов логического форматирования текста:
Еще раз повторюсь, что данные тэги форматирования в своем большинстве очень редко встречаются при написании кода сейчас, но все же знать их назначение будет не лишне.
Удачи вам! До скорых встреч на страницах блога сайт
Вам может быть интересно
Пробельные символы и форматирование ими кода в Html, а так же спецсимволы неразрывного пробела и другие мнемоники
Как задаются цвета в Html и CSS коде, подбор RGB оттенков в таблицах, выдаче Яндекса и других программах
Select, Option, Textarea, Label, Fieldset, Legend - теги Html формы выпадающих списков и текстового поля
Списки в Html коде - теги UL, OL, LI и DL
Как создать гиперссылку (А, Href, Target blank), как открывать ее в новом окне на сайте, а так же сделать картинку ссылкой в Html коде
Таблицы в Html - теги Table, Tr и Td, а так же Colspan, Cellpadding, Cellspacing и Rowspan для их создания
Теги и атрибуты заголовков H1-H6, горизонтальной линии Hr, переноса строки Br и абзаца P по стандарту Html 4.01
Что такое язык гипертекстовой разметки Html и как посмотреть список всех тэгов в валидаторе W3C
Img - Html тег для вставки картинки (Src), выравнивания и обтекание ее текстом (align), а так же задания фона (background)
Директивы комментариев и Doctype в Html коде, а так же понятие блочных и строчных элементов (тэгов)