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

Содержание

Слайд 2

В прошлый раз мы разобрались с Вами в тэгах простой HTML-страницы. Даже

В прошлый раз мы разобрались с Вами в тэгах простой HTML-страницы. Даже
с помощью того незначительного количества тэгов можно создавать относительно полноценные текстовые страницы. Сегодня же мы поговорим об атрибутах тэгов

Слайд 3

Однако в начале хочется заострить Ваше внимание на исключении из правил. Исключение

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

Слайд 4

Тэг
(от англ. break - разрывать) применяется для принудительного перехода на

Тэг (от англ. break - разрывать) применяется для принудительного перехода на другую
другую строку. Не следует путать его с тэгом

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

Слайд 5

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

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

Слайд 6

Тэг

(от англ. horizontal - горизонтальный) . Это горизонтальный разделитель страницы.

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

Слайд 7

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

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

Слайд 8

А вот для горизонтального разделителя можно задать:

Align - горизонтальное выравнивание (left -левое,

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

Слайд 9

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

Простой горизонтальный разделитель

без атрибутов по умолчанию выводится с оттенком

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

Слайд 10

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

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

Слайд 11

Примечание:
Атрибуты задаются всегда в открывающем тэге. Последовательность атрибутов не имеет значения.
Согласно

Примечание: Атрибуты задаются всегда в открывающем тэге. Последовательность атрибутов не имеет значения.
логике у тэгов , и также нет атрибутов.<br>А вот у <body> и <p> атрибуты есть.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide12" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-11.jpg" target="_blank" rel="noopener">Слайд 12</a><h3 class="slides-content text-center font-bold"><div><p>Для <p> их не так много. Точнее один. Это выравнивание по горизонтали</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Для их не так много. Точнее один. Это выравнивание по горизонтали -" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344184/slide-11.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344184/slide-11.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344184/slide-11.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-11.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-11.jpg" class="slides-image"><!----><div class="slides-content">- Align (left -левое, right-правое, center-по центру). Если выравнивание на задано, то по умолчанию оно производится по левому краю страницы.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide13" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-12.jpg" target="_blank" rel="noopener">Слайд 13</a><h3 class="slides-content text-center font-bold"><div><p>Запись <p align=right>Этот текст расположен справа</p> и результат:<br>Этот текст расположен справа<br></div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Запись Этот текст расположен справа и результат: Этот текст расположен справа" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344184/slide-12.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344184/slide-12.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344184/slide-12.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-12.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-12.jpg" class="slides-image"><!----><!----><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide14" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-13.jpg" target="_blank" rel="noopener">Слайд 14</a><h3 class="slides-content text-center font-bold"><div><p>У <body> несколько атрибутов. <br><p> <br>Text - цвет текста документа (по умолчанию</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="У несколько атрибутов. Text - цвет текста документа (по умолчанию черный); BGCOLOR" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344184/slide-13.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344184/slide-13.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344184/slide-13.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-13.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-13.jpg" class="slides-image"><!----><div class="slides-content">черный); <br>BGCOLOR - цвет фона документа (по умолчанию белый); <br>LINK - цвет ссылки; <br>VLink - цвет посещенной ссылки; <br>ALink - цвет активной ссылки; <br>BACKGROUND - ссылка на фоновое изображение. <br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide15" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-14.jpg" target="_blank" rel="noopener">Слайд 15</a><h3 class="slides-content text-center font-bold"><div><p>Регистр букв не имеет значения. Записан атрибут как BGCOLOR, bgcolor или BgColor</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="Регистр букв не имеет значения. Записан атрибут как BGCOLOR, bgcolor или BgColor" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344184/slide-14.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344184/slide-14.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344184/slide-14.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-14.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-14.jpg" class="slides-image"><!----><div class="slides-content">- не имеет принципиального значения. Значения для всех атрибутов задается приравниванием с помощью математического знака "=".<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide16" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-15.jpg" target="_blank" rel="noopener">Слайд 16</a><h3 class="slides-content text-center font-bold"><div><p>А теперь, резюмируя сказанное создадим страничку с именем attrib.html, внутри которой поместим</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="А теперь, резюмируя сказанное создадим страничку с именем attrib.html, внутри которой поместим следующий код." loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/344184/slide-15.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/344184/slide-15.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/344184/slide-15.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-15.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/344184/slide-15.jpg" class="slides-image"><!----><div class="slides-content">следующий код.<br></div><!----><!--]--><!----></div></div><div class="slides-wrapper"><div id="slide17" class="slides-item"><!--[--><h3 class="slides-heading"><a class="slides-headingLink" href="/_ipx/w_720/imagesDir/jpg/344184/slide-16.jpg" target="_blank" rel="noopener">Слайд 17</a><h3 class="slides-content text-center font-bold"><div><p> <html> <br><head><br><title>Пример использования атрибутов тэгов

Написано красным

Пример использования атрибутов тэгов Написано красным по желтому. Сейчас будет горизонтальный разделитель
по желтому. Сейчас будет горизонтальный разделитель



Написано после
горизонтального разделителя
по центру



Имя файла: Атрибуты-тегов.pptx
Количество просмотров: 179
Количество скачиваний: 0
- Предыдущая
Цифровые данные 5-7 класс
Следующая -
Как создать сайт?

Похожие презентации

«Интеллектуальное творчество в условиях современной образовательной среды» «Создание интеллектуально-ориентированной среды в
Рабочие программы по учебным предметам
Гаметогенез
География почв России
КАЗАХСТАНСКАЯ МОДЕЛЬ РЕГУЛИРОВАНИЯ СФЕР ЕСТЕСТВЕННЫХ МОНОПОЛИЙ Тренинговые курсы Inogate Киев,Украина9 – 12 октября, 2007
Мозаика "Попугай"
Lola Rennt (1998)
Презентация на тему Организация и техника внешнеэкономических операций по купле-продаже лицензий и по международному обмену инж
Вода-вещество №1
Пути активизации устной речи на уроках английского языка в рамках коммуникативной методики обучения
На шаг опережая время…
Cardiac murmurs
Новый год! Загадка. Ребусы
Казначейская система исполнения бюджета на примере зарубежных стран
Map. Info Professional
Презентация на тему Петропавловская крепость
Адресная программа
Подготовка к Топик. 읽기
Вайшнава-таттва
Больший
Letter Blends!-b
Память в системе познавательной деятельности
Исследование влияния активных лучевых методов на организм человека Короченцев В.И., Коваль В.Т. Владивосток 2012г.
Билет в будущее
Some by me &amp; Jigott (уходовая косметика и наборы)
Особенности научного стиля современного русского литературного языка Выполнила: Сембина Айганым, студент 2-го курса очной формы
Биоэнергомассажер FOHOW
Клеопатра
LiveInternet
Обратная связь
Для правообладателей
Email: Нажмите что бы посмотреть