Сегодня: 18 апреля 2024 г., четверг Время:

Online-учебник по HTML

Автор учебника: Евгений Андросов

Урок 6. Атрибуты

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

Атрибуты придают дополнительную информацию тегам.

Возьмем для примера уже использовавшийся тег абзаца с атрибутом "align":

Атрибут «align» сообщает браузеру, что данный абзац нужно выровнять по центру экрана. Применительно к тегу абзаца могут быть применены также атрибуты align="left" – выравнивание по левому краю и align="right" – выравнивание по правому краю. Если вы пользуетесь, например, текстовым редактором Word, то для вас здесь ничего нового нет.

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

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

Итак, копируем текст:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Это специальная страница для изучения атрибутов</title>
</head>
<body bgcolor="#FFF2E6" link="#CC3300">

Поздравляю! Это ваш первый сайт, который вы сделали своими руками! Хотите пойти дальше и cделать настоящий сайт? Тогда читайте статью дальше. 
<a href="http://www.freeadvice.ru/view_article.php?id=9">Вернуться назад</a>
</body>
</html>

Вставляем в «Блокнот» (можно заменить содержимое в том файле index.html, который вы создавали в четвертом уроке или создать новый фал), сохраняем, открываем в браузере.

Почему страница вдруг стала розовой? Все очень просто: мы добавили атрибут цвета «bgcolor» (сокращение от background color, что в переводе на русский означает «цвет фона») в тег <body>.
Что еще? Задали цвет ссылок в теге <body> атрибутом link. Поменяли атрибут выравнивания абзаца, выделили первую строку и ссылку жирным шрифтом.

Сохраните это файл. В дальнейших уроках мы проведем с ним еще несколько трансформаций и он станет совсем настоящим сайтом!

Дополнительная информация к уроку.

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

bgcolor="red" (вставьте в наш файл вместо bgcolor="#FFF2E6" и проверьте!)

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

Предыдущий урок | К началу урока | К оглавлению | Следующий урок

Непонятно? Есть вопросы?
Задайте их прямо сейчас и получите ответ автора учебника!

Комментарий добавил(а): Антон
Дата: 19.01.2013

Да, с программой та же ошибка. Но можно скачать программу по этой ссылке: http://4shared.ucoz.ru/load/3-1-0-23 Вирусов нет. Я проверял. Программа очень простая

Комментарий добавил(а): Евгений Андросов
Дата: 23.11.2011

Владимир! Открываете папку, где лежит сохраненный файл, кликаете по нему правой кнопкой мыши -> Открыть с помощью -> Выбираете из выпавшего списка браузер и нажимаете на него. Файл открывается в браузере.

Комментарий добавил(а): Владимир
Дата: 23.11.2011

Вставляем в «Блокнот» (можно заменить содержимое в том файле index.html, который вы создавали в четвертом уроке или создать новый фал), сохраняем, открываем в браузере. В блокноте я сохранил, но не пойму, как открыть его в браузере?

Комментарий добавил(а): Алексей
Дата: 04.11.2011

понял благодарю

Комментарий добавил(а): Евгений Андросов
Дата: 02.11.2011

Алексей! Возможно после копирования, вы забыли сохранить изменения? То есть после того, как вы внесли изменения в файл, нужно зайти в меню "файл" и нажать на "сохранить", после этого смотреть в браузере.

Комментарий добавил(а): Адексей
Дата: 02.11.2011

понятно что не совсем понятно ....что я делаю - я копирую тег и атрибуты в старый фаил с прошлого урока и у меня не че не выходит ....почему? объясните пожалуйста почему

Комментарий добавил(а): oxana2025
Дата: 09.04.2011

Скачала программу, а у меня при попытке открыть её выдаётся ошибка,что отсутствует MSVBM50.DLL.

Комментарий добавил(а): IRINA
Дата: 29.03.2011

Супер!

Задать вопрос

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