SlideShare a Scribd company logo
1 of 18
LOGO

Муниципальное казенное общеобразовательное учреждение
средняя общеобразовательная школа № 7
города Слободского Кировской области

http://yaro-vik.ru/

Атрибуты тегов
© Ярославцев Виктор Леонидович,
учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Однако в начале хочется заострить
Ваше внимание на исключении из
правил. Исключение состоит в том,
что имеются тэги не требующие
закрытия. В частности два тэга <br> и
<hr> не имеют закрывающих - </br> и
</hr> в силу элементарной логики.

© Ярославцев В.Л., учитель информатики
LOGO

Тэг

МКОУ СОШ № 7 г. Слободского

<br>

(от

англ.

break

-

разрывать)
применяется
для
принудительного
перехода
на
другую строку. Не следует путать его
с тэгом <p>, начинающего новый
абзац.
Тэгом
<br>
можно
принудительно перейти на новую
строку даже внутри абзаца.
© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Понятно что сразу после перехода на
новую строку "власть" тэга заканчивается
автоматически, следовательно закрытие
данного тэга не требуется. Допустимо
применение последовательности из двух
и нескольких тэгов. Например <br><br>
означает переход на новую строку и
пропуск еще одной строки.
© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Тэг
<hr>
(от
англ.
horizontal
горизонтальный) . Это горизонтальный
разделитель страницы. Т.е. в месте
установки данного тэга проводится
горизонтальная линия от левого до
правого поля страницы. Как отмечалось
<hr> также не требует закрытия.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

А теперь перейдем к рассмотрению
атрибутов тэга. Практический каждый
тэг, за исключением тех, где это не
требуется в силу логики, имеет
атрибуты. Начнем с рассмотренных
<br> и <hr>. Переход на новую строку
не имеет никаких атрибутов.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

А вот для горизонтального
разделителя можно задать:
1. Align - горизонтальное выравнивание (left
-левое, right-правое, center-по центру);
2. Size - размер по вертикали (толщина
горизонтальной черты в пикселях);
3. WIDTH
ширина
горизонтального
разделителя в точках экрана или процентах;
4. NOSHADE - если установлен этот атрибут,
то черта проводится без оттенков.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Рассмотрим примеры:

Простой горизонтальный разделитель
<hr> без атрибутов по умолчанию
выводится с оттенком с центровкой по
горизонтали.
Теперь зададим все атрибуты
следующим образом:,
<hr noshade size=5 width=50%>
© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Как мы заметили все атрибуты
записываются
сразу
после
названия тэга внутри угловых
скобок просто через пробел без
всяких знаков препинания.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Для <p> их не так много. Точнее
один.
Это
выравнивание
по
горизонтали - Align (left -левое,
right-правое, center-по центру).
Если выравнивание на задано, то
по умолчанию оно производится по
левому краю страницы.
© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Запись <p align=right>Этот текст
расположен справа</p> и результат:
Этот текст расположен справа

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

У <body> несколько атрибутов.

1.Text - цвет текста документа (по
умолчанию черный);
2.BGCOLOR - цвет фона документа (по
умолчанию белый);
3.LINK - цвет ссылки;
4.VLink - цвет посещенной ссылки;
5.ALink - цвет активной ссылки;
6.BACKGROUND - ссылка на фоновое
изображение.
© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Регистр букв не имеет значения. Записан
атрибут как BGCOLOR, bgcolor или
BgColor - не имеет принципиального
значения. Значения для всех атрибутов
задается приравниванием с помощью
математического знака "=".

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

А
теперь,
резюмируя
сказанное
создадим
страничку
с
именем
attrib.html, внутри которой поместим
следующий код.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

<html>
<head>
<title>Пример использования атрибутов тэгов</title>
</head> <body text=red bgcolor=yellow>
<p>Написано красным по желтому. Сейчас будет горизонтальный
разделитель</p>
<hr noshade size=3 width=80%>
<p align=center>Написано после<br>
горизонтального разделителя<br>по центру</p>

</body>

</html>

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

Мы установили цвет текста красным
(red) text=red, а цвет фона страницы желтым
(yellow)
bgcolor=yellow.
Посмотрите, где поставлены тэги <br> и
как они себя проявляют.

© Ярославцев В.Л., учитель информатики
LOGO

МКОУ СОШ № 7 г. Слободского

yaro-vik@yandex.ru

© Ярославцев В.Л., учитель информатики

More Related Content

Similar to атрибуты тегов

Cвободная система проведения тестирования и анализа результатов iTest1
Cвободная система проведения тестирования и анализа результатов iTest1Cвободная система проведения тестирования и анализа результатов iTest1
Cвободная система проведения тестирования и анализа результатов iTest1Виктор Леонидович Ярославцев
 
Занятие внеурочной деятельности "Создание мультфильма"
Занятие внеурочной деятельности "Создание мультфильма"Занятие внеурочной деятельности "Создание мультфильма"
Занятие внеурочной деятельности "Создание мультфильма"Виктор Леонидович Ярославцев
 
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...Виктор Леонидович Ярославцев
 
Модель. Описание (модель) реального объекта или процесса
Модель. Описание (модель) реального объекта или процессаМодель. Описание (модель) реального объекта или процесса
Модель. Описание (модель) реального объекта или процессаВиктор Леонидович Ярославцев
 
Основные конструкции языка программирования. Система программирования
Основные конструкции языка программирования. Система программированияОсновные конструкции языка программирования. Система программирования
Основные конструкции языка программирования. Система программированияВиктор Леонидович Ярославцев
 
Создание текстовых документов на основе шаблонов. Создание шаблонов
Создание текстовых документов на основе шаблонов. Создание шаблоновСоздание текстовых документов на основе шаблонов. Создание шаблонов
Создание текстовых документов на основе шаблонов. Создание шаблоновВиктор Леонидович Ярославцев
 
Понятие о настольных издательских системах. Создание компьютерных публикаций
Понятие о настольных издательских системах. Создание компьютерных публикацийПонятие о настольных издательских системах. Создание компьютерных публикаций
Понятие о настольных издательских системах. Создание компьютерных публикацийВиктор Леонидович Ярославцев
 
Основные этапы разработки программ. Разбиение задачи на подзадачи
Основные этапы разработки программ. Разбиение задачи на подзадачиОсновные этапы разработки программ. Разбиение задачи на подзадачи
Основные этапы разработки программ. Разбиение задачи на подзадачиВиктор Леонидович Ярославцев
 

Similar to атрибуты тегов (16)

Cвободная система проведения тестирования и анализа результатов iTest1
Cвободная система проведения тестирования и анализа результатов iTest1Cвободная система проведения тестирования и анализа результатов iTest1
Cвободная система проведения тестирования и анализа результатов iTest1
 
Компьютерная графика
Компьютерная графикаКомпьютерная графика
Компьютерная графика
 
Файловая структура
Файловая структураФайловая структура
Файловая структура
 
Правила набора компьютерного текста
Правила набора компьютерного текстаПравила набора компьютерного текста
Правила набора компьютерного текста
 
Занятие внеурочной деятельности "Создание мультфильма"
Занятие внеурочной деятельности "Создание мультфильма"Занятие внеурочной деятельности "Создание мультфильма"
Занятие внеурочной деятельности "Создание мультфильма"
 
Высказывания. Логические операции
Высказывания. Логические операцииВысказывания. Логические операции
Высказывания. Логические операции
 
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...
Системы, компоненты, состояние и взаимодействие компонентов. Информационное в...
 
Операционная система
Операционная системаОперационная система
Операционная система
 
Моделирование
МоделированиеМоделирование
Моделирование
 
Модель. Описание (модель) реального объекта или процесса
Модель. Описание (модель) реального объекта или процессаМодель. Описание (модель) реального объекта или процесса
Модель. Описание (модель) реального объекта или процесса
 
Основные конструкции языка программирования. Система программирования
Основные конструкции языка программирования. Система программированияОсновные конструкции языка программирования. Система программирования
Основные конструкции языка программирования. Система программирования
 
Создание текстовых документов на основе шаблонов. Создание шаблонов
Создание текстовых документов на основе шаблонов. Создание шаблоновСоздание текстовых документов на основе шаблонов. Создание шаблонов
Создание текстовых документов на основе шаблонов. Создание шаблонов
 
Понятие о настольных издательских системах. Создание компьютерных публикаций
Понятие о настольных издательских системах. Создание компьютерных публикацийПонятие о настольных издательских системах. Создание компьютерных публикаций
Понятие о настольных издательских системах. Создание компьютерных публикаций
 
Основные этапы разработки программ. Разбиение задачи на подзадачи
Основные этапы разработки программ. Разбиение задачи на подзадачиОсновные этапы разработки программ. Разбиение задачи на подзадачи
Основные этапы разработки программ. Разбиение задачи на подзадачи
 
Основные понятия. Типы данных
Основные понятия. Типы данныхОсновные понятия. Типы данных
Основные понятия. Типы данных
 
Классификация компьютеров
Классификация компьютеровКлассификация компьютеров
Классификация компьютеров
 

More from Виктор Леонидович Ярославцев

Примеры интерактивных материалов, созданных в «learning apps»
Примеры интерактивных материалов, созданных в «learning apps»Примеры интерактивных материалов, созданных в «learning apps»
Примеры интерактивных материалов, созданных в «learning apps»Виктор Леонидович Ярославцев
 

More from Виктор Леонидович Ярославцев (20)

Возьмёмся за руки друзья
Возьмёмся за руки друзьяВозьмёмся за руки друзья
Возьмёмся за руки друзья
 
Самоучитель игры на гитаре
Самоучитель игры на гитареСамоучитель игры на гитаре
Самоучитель игры на гитаре
 
Игра на шестиструнной гитаре
Игра на шестиструнной гитареИгра на шестиструнной гитаре
Игра на шестиструнной гитаре
 
Букварь для начинающего гитариста
Букварь для начинающего гитаристаБукварь для начинающего гитариста
Букварь для начинающего гитариста
 
Школа игры на шестиструнной гитаре
Школа игры на шестиструнной гитаре Школа игры на шестиструнной гитаре
Школа игры на шестиструнной гитаре
 
Школа игры на шестиструнной гитаре
Школа игры на шестиструнной гитареШкола игры на шестиструнной гитаре
Школа игры на шестиструнной гитаре
 
Методическая система учителя
Методическая система учителяМетодическая система учителя
Методическая система учителя
 
Ресурс дистанционного обучения
Ресурс дистанционного обученияРесурс дистанционного обучения
Ресурс дистанционного обучения
 
Справка о публичной презентации
Справка о публичной презентацииСправка о публичной презентации
Справка о публичной презентации
 
Информация о профессиональных достижениях
Информация о профессиональных достиженияхИнформация о профессиональных достижениях
Информация о профессиональных достижениях
 
Публикация материала на персональном сайте педагога
Публикация материала на персональном сайте педагогаПубликация материала на персональном сайте педагога
Публикация материала на персональном сайте педагога
 
Создание интерактивных материалов в «learningapps»
Создание интерактивных материалов в «learningapps»Создание интерактивных материалов в «learningapps»
Создание интерактивных материалов в «learningapps»
 
Создание учебных классов
Создание учебных классовСоздание учебных классов
Создание учебных классов
 
Регистрация на сервисе «learningapps»
Регистрация на сервисе «learningapps»Регистрация на сервисе «learningapps»
Регистрация на сервисе «learningapps»
 
Примеры интерактивных материалов, созданных в «learning apps»
Примеры интерактивных материалов, созданных в «learning apps»Примеры интерактивных материалов, созданных в «learning apps»
Примеры интерактивных материалов, созданных в «learning apps»
 
Обзор сервиса learningapps.org
Обзор сервиса learningapps.orgОбзор сервиса learningapps.org
Обзор сервиса learningapps.org
 
Методическая разработка использование сервиса LearningАpps
Методическая разработка использование сервиса LearningАppsМетодическая разработка использование сервиса LearningАpps
Методическая разработка использование сервиса LearningАpps
 
Муниципальный лагерь "Перекрёсток"
Муниципальный лагерь "Перекрёсток"Муниципальный лагерь "Перекрёсток"
Муниципальный лагерь "Перекрёсток"
 
Ученический проект переход на СПО в школе
Ученический проект переход на СПО в школеУченический проект переход на СПО в школе
Ученический проект переход на СПО в школе
 
Публикация теста на странице своего Интернет-ресурса
Публикация теста на странице своего Интернет-ресурсаПубликация теста на странице своего Интернет-ресурса
Публикация теста на странице своего Интернет-ресурса
 

атрибуты тегов

  • 1. LOGO Муниципальное казенное общеобразовательное учреждение средняя общеобразовательная школа № 7 города Слободского Кировской области http://yaro-vik.ru/ Атрибуты тегов © Ярославцев Виктор Леонидович, учитель информатики
  • 2. LOGO МКОУ СОШ № 7 г. Слободского Однако в начале хочется заострить Ваше внимание на исключении из правил. Исключение состоит в том, что имеются тэги не требующие закрытия. В частности два тэга <br> и <hr> не имеют закрывающих - </br> и </hr> в силу элементарной логики. © Ярославцев В.Л., учитель информатики
  • 3. LOGO Тэг МКОУ СОШ № 7 г. Слободского <br> (от англ. break - разрывать) применяется для принудительного перехода на другую строку. Не следует путать его с тэгом <p>, начинающего новый абзац. Тэгом <br> можно принудительно перейти на новую строку даже внутри абзаца. © Ярославцев В.Л., учитель информатики
  • 4. LOGO МКОУ СОШ № 7 г. Слободского Понятно что сразу после перехода на новую строку "власть" тэга заканчивается автоматически, следовательно закрытие данного тэга не требуется. Допустимо применение последовательности из двух и нескольких тэгов. Например <br><br> означает переход на новую строку и пропуск еще одной строки. © Ярославцев В.Л., учитель информатики
  • 5. LOGO МКОУ СОШ № 7 г. Слободского Тэг <hr> (от англ. horizontal горизонтальный) . Это горизонтальный разделитель страницы. Т.е. в месте установки данного тэга проводится горизонтальная линия от левого до правого поля страницы. Как отмечалось <hr> также не требует закрытия. © Ярославцев В.Л., учитель информатики
  • 6. LOGO МКОУ СОШ № 7 г. Слободского А теперь перейдем к рассмотрению атрибутов тэга. Практический каждый тэг, за исключением тех, где это не требуется в силу логики, имеет атрибуты. Начнем с рассмотренных <br> и <hr>. Переход на новую строку не имеет никаких атрибутов. © Ярославцев В.Л., учитель информатики
  • 7. LOGO МКОУ СОШ № 7 г. Слободского А вот для горизонтального разделителя можно задать: 1. Align - горизонтальное выравнивание (left -левое, right-правое, center-по центру); 2. Size - размер по вертикали (толщина горизонтальной черты в пикселях); 3. WIDTH ширина горизонтального разделителя в точках экрана или процентах; 4. NOSHADE - если установлен этот атрибут, то черта проводится без оттенков. © Ярославцев В.Л., учитель информатики
  • 8. LOGO МКОУ СОШ № 7 г. Слободского Рассмотрим примеры: Простой горизонтальный разделитель <hr> без атрибутов по умолчанию выводится с оттенком с центровкой по горизонтали. Теперь зададим все атрибуты следующим образом:, <hr noshade size=5 width=50%> © Ярославцев В.Л., учитель информатики
  • 9. LOGO МКОУ СОШ № 7 г. Слободского Как мы заметили все атрибуты записываются сразу после названия тэга внутри угловых скобок просто через пробел без всяких знаков препинания. © Ярославцев В.Л., учитель информатики
  • 10. LOGO МКОУ СОШ № 7 г. Слободского © Ярославцев В.Л., учитель информатики
  • 11. LOGO МКОУ СОШ № 7 г. Слободского Для <p> их не так много. Точнее один. Это выравнивание по горизонтали - Align (left -левое, right-правое, center-по центру). Если выравнивание на задано, то по умолчанию оно производится по левому краю страницы. © Ярославцев В.Л., учитель информатики
  • 12. LOGO МКОУ СОШ № 7 г. Слободского Запись <p align=right>Этот текст расположен справа</p> и результат: Этот текст расположен справа © Ярославцев В.Л., учитель информатики
  • 13. LOGO МКОУ СОШ № 7 г. Слободского У <body> несколько атрибутов. 1.Text - цвет текста документа (по умолчанию черный); 2.BGCOLOR - цвет фона документа (по умолчанию белый); 3.LINK - цвет ссылки; 4.VLink - цвет посещенной ссылки; 5.ALink - цвет активной ссылки; 6.BACKGROUND - ссылка на фоновое изображение. © Ярославцев В.Л., учитель информатики
  • 14. LOGO МКОУ СОШ № 7 г. Слободского Регистр букв не имеет значения. Записан атрибут как BGCOLOR, bgcolor или BgColor - не имеет принципиального значения. Значения для всех атрибутов задается приравниванием с помощью математического знака "=". © Ярославцев В.Л., учитель информатики
  • 15. LOGO МКОУ СОШ № 7 г. Слободского А теперь, резюмируя сказанное создадим страничку с именем attrib.html, внутри которой поместим следующий код. © Ярославцев В.Л., учитель информатики
  • 16. LOGO МКОУ СОШ № 7 г. Слободского <html> <head> <title>Пример использования атрибутов тэгов</title> </head> <body text=red bgcolor=yellow> <p>Написано красным по желтому. Сейчас будет горизонтальный разделитель</p> <hr noshade size=3 width=80%> <p align=center>Написано после<br> горизонтального разделителя<br>по центру</p> </body> </html> © Ярославцев В.Л., учитель информатики
  • 17. LOGO МКОУ СОШ № 7 г. Слободского Мы установили цвет текста красным (red) text=red, а цвет фона страницы желтым (yellow) bgcolor=yellow. Посмотрите, где поставлены тэги <br> и как они себя проявляют. © Ярославцев В.Л., учитель информатики
  • 18. LOGO МКОУ СОШ № 7 г. Слободского yaro-vik@yandex.ru © Ярославцев В.Л., учитель информатики