Основы HTML

1
Если мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.
HTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.
Теги (tags) – команды языка HTML
Для файлов, являющихся HTML-документами, принято расширение htm или html.
1
2
2
1
Назначение и основные понятия

Формат тега (правила его записи):
<тег атрибут=«значение» атрибут=«значение»…>
У многих тегов есть свои атрибуты. Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами.
Атрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.
Особенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.
Каждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу
.
2
1
Сообщения об ошибках, допущенных в формате тегов, не появляются.
Ошибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому!
Назначение и основные понятия
1
2
2

3
Служебная информация
<br> информация об имени страницы<br>
основная часть документа
Структура HTML-документа

4
– начинает блок служебной информации.
– завершает блок служебной информации.
–</div></h3></h3><img onerror="this.setAttribute('data-error', 1)" width="720" height="540" alt="4 – начинает блок служебной информации. – завершает блок служебной информации. –" loading="eager" data-nuxt-img sizes="(max-width: 1024px) 480px, 720px" srcset="/_ipx/f_webp&q_80&fit_contain&s_480x360/imagesDir/jpg/420349/slide-4.jpg 480w, /_ipx/f_webp&q_80&fit_contain&s_720x540/imagesDir/jpg/420349/slide-4.jpg 720w, /_ipx/f_webp&q_80&fit_contain&s_960x720/imagesDir/jpg/420349/slide-4.jpg 960w, /_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420349/slide-4.jpg 1440w" src="/_ipx/f_webp&q_80&fit_contain&s_1440x1080/imagesDir/jpg/420349/slide-4.jpg" class="slides-image"><!----><div class="slides-content">начинает блок информации, которая будет отображаться в строке заголовка обозревателя.<br>
– завершает блок информации, которая будет отображаться в строке заголовка обозревателя.
– содержит служебную информацию.
Каждый тег
содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание.
Варианты:
описывает краткое содержание страницы.
определяет набор ключевых слов для поиска, облегчающий работу поисковым машинам, а создателю сайта дает больше шансов, что его информация будет найдена.
описывает имя автора страницы.
через 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению.
Служебные теги
1
2
2
1

5
– изменение размера шрифта.
– отмена выбранного размера шрифта.
N∈[1…6]
– полужирный шрифт.
– отмена полужирного шрифта.
– курсив.
– отмена курсива.
– подчёркивание.
– отмена подчёркивания.
– полужирный шрифт.
– отмена полужирного шрифта.
– увеличение шрифта относительно текущего.
– отмена увеличения шрифта относительно текущего.
– уменьшение шрифта относительно текущего.
– отмена уменьшения шрифта относительно текущего.
Введя в Блокноте HTML-код и сохранив файл в формате htm, можно запустить его, и в окне Internet Exploter отобразится содержание документа.
Форматирование текста
1
2
2
1

6
– переход на следующую строку.
– отображение без изменения форматирования. – отмена отображения без изменения форматирования.
Пример действия этого тега:
первый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом.
– текст сдвигается вверх (верхний индекс).
– отмена сдвига.
– текст сдвигается вниз (нижний индекс).
– отмена сдвига.
Форматирование текста
1
2
1
2

7
– изменение шрифта.
– отмена действия шрифта.
Атрибуты тега
COLOR= «название цвета или его шестнадцатеричный код»
изменение цвета текста.
Например, чтобы в окне обозревателя
текст отображался красным цветом, нужно ввести в HTML-код такую команду:
текст
Форматирование текста
1
2
2
1

8
Шестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop.
В палитре инструментов подвести указатель мыши к цвету переднего плана или цвету фона. Двойным щелчком левой кнопки мыши на цвете переднего плана или фона можно запустить диалоговое окно Сборщик цветов.
В нижней части этого окна справа есть поле (на рисунке оно обведено), в котором отображён соответствующий данному цвету шестнадцатеричный код.
1
2
2
1
Форматирование текста

9
FACE = название шрифта – изменение гарнитуры (начертания) шрифта.
SIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.
Атрибуты могут перечисляться через пробел в произвольном порядке.
Пример записи и результат действия этих тегов.
Форматирование текста
1
2
2
1
Лучше, однако, не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные.

10
Линии
Создает горизонтальные линии.
Атрибуты тега
SIZE =толщина линии в пикселах
WIDTH= ширина линии в пикселах или 80%
LEFT
ALIGN = RIGHT
CENTER
Выравнивание линии относительно ширины страницы
– абзац.
– конец абзаца.
Атрибуты тега
для выравнивания текста
Атрибуту ALIGN может быть присвоено одно из 4-х значений:
LEFT
ALIGN = RIGHT
CENTER
JUSTIFY
Позволяет выравнивать текст по левому, правому краю по центру или по ширине.
Пример записи и результат действия этого тега с различными значениями атрибутов.
Форматирование текста
1
2
2
1

11
Фон страницы задается в начале основной части документа, т.е. атрибутами тега .
Атрибуты тега для изменения
цвета текста и фона
TEXT= название цвета или его код
Задает цвет текста.
BGCOLOR= название цвета или его код
Задает цвет фона.
Пример записи и результат действия этого тега.
BACKGROUND= имя файла
Использование в качестве фона изображения из файла. Изображение-текстуру можно создать в графическом редакторе.
BGPROPERTIES=FIXED
Создание фона – «водяного знака»
(фона, который не перемещается вместе с текстом).
1
2
2
1
Создание фона

12
Вставка графических изображений
вставка картинки из файла.
Атрибуты тега
SRC= имя файла.расширение
ALT= название картинки или поясняющий текст
Используется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку.
WIDTH = ширина (в пикселах или в %)
HIGHT = высота (в пикселах или в %)
BORDER = число в пикселах
Определяет рамку вокруг изображения.
HSPACE = число в пикселах
VSPACE = число в пикселах
Определяют горизонтальный и вертикальный отступ вокруг изображения соответственно.
Пример записи и результат действия этого тега с различными значениями атрибутов.
1
2
2
Вставка графики, видео, звука
1
Все файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу.

13
LEFT
ALIGN = RIGHT
CENTER
Используется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом.
LEFT
CLEAR = RIGHT
ALL
Используется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом.
Пример записи и результат действия тега с различными значениями атрибутов.
1
2
2
1
Вставка графики, видео, звука
Практическая
работа №1
Материалы для
работы
Если картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке.

Пример записи и результат действия тегов с различными значениями атрибутов.
14
Вставка видео и звука
Вставка звукового файла.
Вставка видео файла.
Вставка видео или звукового файла (с панелью управления).
Атрибут тегов
,
n true
LOOP = INFINITE AUTOSTART= f alse
1
2
2
1
Вставка графики, видео, звука
Практическая
работа №2
Материалы для
работы
Если видео не отображается, возможно, неправильно указано имя файла, или его расширение, или файл отсутствует в нужной папке.
Количество повторений видео или звукового клипа и непрерывное повторение соответственно.
Автоматическое воспроизведение и воспроизведение при нажатии кнопки соответственно.

15
Списки
Есть 2 вида списков: ненумерованные
(маркированные) и нумерованные.
Ненумерованные списки:
(Unordered List) – начало списка
– конец списка.
(List Item) – элемент списка.
Атрибут тега
DISC
TYPE = CIRCLE
SQUARE
Определяет вид маркера
Пример записи и результат действия тегов.
1
2
Создание списков и таблиц
1
2

Нумерованные списки:
(Ordered List) – начало списка.
– конец списка.
(List Item) – элемент списка.
Атрибуты тега
1
TYPE = A
I
…
Определяет тип нумерации: арабскими цифрами, русскими буквами, римскими цифрами и т.д.
Пример записи и результат действия тегов с различными значениями атрибутов.
16
1
2
Создание списков и таблиц
1
2
Практическая
работа №3
Материалы для
работы

Таблицы
– начало таблицы.
– конец таблицы.
– начало заголовка таблицы. – конец заголовка таблицы.
Заголовок располагается прямо по центру относительно ширины таблицы.
(Table Header) – начало заголовков столбцов или строк таблицы.
– конец заголовков столбцов или строк таблицы.
(Table Row) – начало строки таблицы.
– конец строки таблицы.
– начало ячейки таблицы.
– конец ячейки таблицы.
Пример записи и результат действия тегов с различными значениями атрибутов.
17
1
2
Создание списков и таблиц
1
2

Атрибуты тега
WIDTH=ширина таблицы в пикселах или %
BORDER=ширина границы таблицы в пикселах
или %
Если она равна нулю – границы становятся невидимы.
CELLSPACING= ширина промежутков между ячейками в пикселах или %
CELLPADDING= ширина промежутков между содержимым ячейки и её границами в пикселах или %
Атрибуты тега
,
,
Таблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются.
ROWSPAN = количество объединяемых строк
COLSPAN = количество объединяемых столбцов
BGCOLOR = цвет фона заголовка, строки, ячейки
Пример записи и результат действия тегов с различными значениями атрибутов.
18
1
2
Практическая
работа №4
Материалы для
работы
Создание списков и таблиц
2
1
Слайд 20
Бегущая строка
– начало бегущей строки.
– конец бегущей строки.
Фрагмент текста, картинки
или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.
Атрибуты тега
WIDTH = ширина области бегущей строки в пикселах или
в % от высоты экрана
BGCOLOR = название цвета или его код
Определяет цвет фона бегущей строки.
DIRECTION = LEFT
RIGHT
Определяет направление бегущей строки.
Пример записи и результат действия тегов с различными значениями атрибутов.
19
1
2
Бегущая строка
2
1
Слайд 21
n
LOOP = INFINITE
Определяет количество «прокруток» бегущей
строки: при первом значении атрибута –
n , при
втором значении атрибута – бесконечно (по умолчанию).
TOP
ALIGN = MIDDLE
BOTTOM
Позволяет разместить текст в верхней, средней или нижней части области бегущей строки.
SCROLL
BEHAVIOR = SLADE
ALTERNATE
Определяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.
SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]
HIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )
Пример записи и результат действия тегов с различными значениями атрибутов.
20
1
2
2
1
Бегущая строка
Слайд 22
Формат тега, создающего ссылку на другой
документ:
активный
текст или изображение
Если файл находится в другой папке, то нужно
указывать путь к нему.
Если создается ссылка на ресурс Интернета, то нужно
указать его URL:
активный текст или изображение
Можно организовать сообщение по электронной почте
активный текст или изображение
Атрибуты тега для задания цвета ссылок
LINK= цвет или код цвета
Задает цвет ссылки.
VLINK= цвет или код цвета
Задает цвет просмотренной ссылки
Пример записи и результат действия тегов с различными значениями атрибутов.
21
1
2
2
Создание ссылок
ALINK= цвет или код цвета
Задает цвет выбранной ссылки
Практическая
работа №5
Материалы для
работы
1
Слайд 23
22
1
2
2
1
Создание ссылок
Ссылки на метки
Можно организовать ссылку на другую часть
этого же документа,
если предварительно расставить в начале таких частей метки.
активный текст или изображение
Создает ссылку на метку в текущем HTML-документе:
начало текстового фрагмента
Можно также создать ссылку на метку в другом документе:
активный текст или изображение
Пример записи и результат действия тегов.
Практическая
работа №6
Материалы для
работы
Слайд 24
23
Создание фреймов
Кадры (frames) – это независимые части,
на которые можно разбить окно
браузера, и в
каждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками.
Количество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:
Он пределяет фреймовую структуру.
Завершает определение фреймовой структуры.
Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.
Пример записи и результат действия тегов.
Использование тега исключает использование тега !
Определяя структуру, кадры задают сверху вниз и слева направо.
1
1
2
1
2
Слайд 25
24
1
Создание фреймов
Атрибуты тега
NAME = имя кадра
Задает имя кадра.
Это имя
потом используется в качестве значения атрибута target в теге
для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре.
Пример записи ссылок с атрибутом target.
NORESIZE
Означает запрет перемещения мышкой границы между кадрами.
no
FRAMEBORDER=
yes
Означает наличие или отсутствие границы между кадрами.
1
Практическая
работа №7
Материалы для
работы
Слайд 26
25
Создание фреймов
Фреймовую структуру можно создать также с помощью тегов для создания таблиц
и тега
<br>
Этот тег имеет такие же атрибуты, как и тег .
Удобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.
Пример записи и результат действия тегов.
1
2
1
2
Практическая
работа №8
Материалы для
работы
Слайд 27
26
Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти
части (области) и определить их координаты. Такое изображение называют картой (map).
Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.
Тег, который позволяет определить карту:
Между открывающим и закрывающим тегами
определяются области карты при помощи тега
Для каждой области карты должен быть создан свой элемент
, который должен включать атрибут, определяющий ссылку HREF= адрес ссылки
Атрибуты тега
Задаётся имя изображения-карты при помощи
атрибута NAME.
NAME= имя
1
Изображение-карта
1
Слайд 28
27
Атрибуты тега
alt= название области изображения-карты
Это атрибут для задания текста, заменяющего
изображение-карту, не является обязательным.
TARGET= имя фрейма
Определяет имя фрейма для загрузки документа, на который делается ссылка с данной области.
Атрибут, определяющий форму области на карте:
rect
SHAPE = poly
сircle
point
COORDS =x,y,x1,y1
Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
COORDS =x,y,x1,y1… xn,yn
Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
COORDS =x,y,r
Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
COORDS =x,y
Описывает координаты точки point (значения атрибута – её координаты).
Изображение-карта
Определение координат областей для
изображения-карты.
Слайд 29
28
Более простой способ получить значения координат – воспользоваться
Он устанавливается дополнительно и
совместим со всеми версиями редактора Adobe Photoshop.
Изображение-карта
Определение координат областей для
изображения-карты с помощью специального фильтра.
специальным фильтром.
Слайд 30
29
Удобно использовать изображение-карту, когда страница разделена на два фрейма.
В одном фрейме
можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.
Пример записи и результат действия тегов
Изображение-карта
Практическая
работа №9
Материалы для
работы
1
2
2
1
Слайд 31
30
Web-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также
на сайтах, посвященных творчеству художников, дизайнеров.
Web-галерея выглядит как таблица, в ячейках которой расположены миниатюры, с которых есть ссылки на эти же изображения большего формата.
Создание Web-галереи.
Web-галерея
Практическая
работа №10
Материалы для
работы
Имя файла: Основы-HTML.pptx
Количество просмотров: 208
Количество скачиваний: 1
Скачать
- Предыдущая
Сертификат социальной безответственности
Следующая -
Современные подходы к сопровождению процедуры аттестации педагогических работников
Похожие презентации
Открытые уроки
Николай Корнильевич Пимоненко
Ватикан
ЗАКОНОДАТЕЛЬНАЯ ОСНОВА ИЗБИРАТЕЛЬНОЙ СИСТЕМЫ ФЕДЕРАЛЬНЫЙ ЗАКОН "О СРЕДСТВАХ МАССОВОЙ ИНФОРМАЦИИ"
Стюардесса и её обязанности
Биг Бен на английском
Векторная графика
презентация продукта
Презентация на тему Формирование познавательной активности детей через экологическое воспитание
Презентация на тему Правила по русскому языку
Presentation Title
Курочкина Наталья Николаевна, Учитель начальных классов. МКОУ«Подбельская ООШ», Москаленский район , Омская область.
Предложения с обращениями 8 класс
Стихи прекрасное Творенье!
Виды рекламы по рекламодателям
Инклюзивное образование
Что такое выборы?
Пословицы и поговорки о воде
9. Останавливается ли Гольфстрим? Согласно апокалиптическим прогнозам из–за глобального потепления Гольфстрим может остановить
Русские национальные виды спорта и игры
Сервировка стола Культура поведения за столом
Повелительное наклонение the imperative mood
Заместитель начальника управления Алтайского края по государственному регулированию цен и тарифов Ситникова Ольга Валерьев
For environmental safety and public participation
Субботин, это только для тебя!
Доспехи средневекового рыцаря
Презентация на тему До свидания, начальная школа
Вторая жизнь Храма городца Ижеславец
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return {data:{meta:{result:{meta:{h1:n,main_text:b,main_title:o,main_description:p,main_keywords:q,main_image:b},app:{logo_image:r,logo_image_width:i,logo_image_height:j,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:k,header_bg:l,accent:H}},social:I}},categories:{result:[{id:m,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:J,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:m,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:420349,name:"Основы HTML",category:J,count:j,jpg:"jpg\u002F420349",hits:208,download:m,h1:K,meta:{h1:K,title:"Основы HTML презентация",description:"Основы HTML презентация, доклад, проект, Разное ",keywords:"Основы HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основы HTML, из раздела: Разное.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЕсли мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.\u003Cbr\u003EHTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.\u003Cbr\u003EТеги (tags) – команды языка HTML\u003Cbr\u003EДля файлов, являющихся HTML-документами, принято расширение htm или html. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E \u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EФормат тега (правила его записи):\u003Cbr\u003E\u003Cbr\u003E\u003Cтег атрибут=«значение» атрибут=«значение»…\u003E\u003Cbr\u003E\u003Cbr\u003EУ многих тегов есть свои атрибуты. Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами. \u003Cbr\u003EАтрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.\u003Cbr\u003EОсобенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.\u003Cbr\u003EКаждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу \u003CF5\u003E.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EСообщения об ошибках, допущенных в формате тегов, не появляются. \u003Cbr\u003EОшибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому! \u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E",file:"Основы-HTML.pptx",texts:["\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003EОсновы \r\nHTML\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003EОсновы \r\nHTML\u003Cbr\u003E\u003Cp\u003EСлужебные теги\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EСоздание фона\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EWeb-галерея\u003Cbr\u003E\u003Cp\u003EСоздание форм\u003Cbr\u003E","\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЕсли мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.\u003Cbr\u003EHTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.\u003Cbr\u003EТеги (tags) – команды языка HTML\u003Cbr\u003EДля файлов, являющихся HTML-документами, принято расширение htm или html. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E","\u003Cp\u003EФормат тега (правила его записи):\u003Cbr\u003E\u003Cтег атрибут=«значение» атрибут=«значение»…\u003E\u003Cbr\u003EУ многих тегов есть свои атрибуты. Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами. \u003Cbr\u003EАтрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.\u003Cbr\u003EОсобенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.\u003Cbr\u003EКаждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу \u003CF5\u003E.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСообщения об ошибках, допущенных в формате тегов, не появляются. \u003Cbr\u003EОшибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому! \u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E3\u003Cbr\u003E\u003Cp\u003E\u003CHTML\u003E\u003Cbr\u003E\t \u003CHEAD\u003E\u003Cbr\u003E Служебная информация\u003Cbr\u003E\t\t\u003CTITLE\u003E\u003Cbr\u003E\t\t\tинформация об имени страницы\u003Cbr\u003E\t\t\u003C\u002FTITLE\u003E\u003Cbr\u003E\t \u003Cbr\u003E\t\u003C\u002FHEAD\u003E\u003Cbr\u003E\t\u003Cbr\u003E\t\u003CBODY\u003E\u003Cbr\u003E\t \t\u003Cbr\u003E\t\t\tосновная часть документа\u003Cbr\u003E\t\u003Cbr\u003E\t \u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E","\u003Cp\u003E4\u003Cbr\u003E\u003Cp\u003E\u003CHEAD\u003E – начинает блок служебной информации.\u003Cbr\u003E\u003C\u002FHEAD\u003E – завершает блок служебной информации.\u003Cbr\u003E\u003CTITLE\u003E – начинает блок информации, которая будет отображаться в строке заголовка обозревателя.\u003Cbr\u003E\u003C\u002FTITLE\u003E – завершает блок информации, которая будет отображаться в строке заголовка обозревателя.\u003Cbr\u003E\u003CMETA\u003E – содержит служебную информацию. \u003Cbr\u003EКаждый тег \u003CMETA\u003E содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание.\u003Cbr\u003EВарианты: \u003Cbr\u003E\u003CMETA name=Description content=\"содержание страницы\" \u003E\u003Cbr\u003Eописывает краткое содержание страницы.\u003Cbr\u003E\u003CMETA name=keywords content=\"слово1, слово2, …\" \u003E\u003Cbr\u003Eопределяет набор ключевых слов для поиска, облегчающий работу поисковым машинам, а создателю сайта дает больше шансов, что его информация будет найдена.\u003Cbr\u003E\u003CMETA name=Author content=\"Имя автора\" \u003E\u003Cbr\u003Eописывает имя автора страницы.\u003Cbr\u003E\u003CMETA HTTP-EQUIV=refresh content=5 url=http:\u002F\u002Fwww.litolab.narod.ru \u003E\u003Cbr\u003Eчерез 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению.\u003Cbr\u003E\u003Cp\u003EСлужебные теги\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E5\u003Cbr\u003E\u003Cp\u003E\u003CHN\u003E – изменение размера шрифта. \u003Cbr\u003E\u003C\u002FHN\u003E – отмена выбранного размера шрифта. \u003Cbr\u003EN∈[1…6]\t\t\u003Cbr\u003E\u003CB\u003E – полужирный шрифт.\u003Cbr\u003E\u003C\u002FB\u003E – отмена полужирного шрифта.\u003Cbr\u003E\u003CI\u003E – курсив.\u003Cbr\u003E\u003C\u002FI\u003E – отмена курсива.\u003Cbr\u003E\u003CU\u003E – подчёркивание.\u003Cbr\u003E\u003C\u002FU\u003E – отмена подчёркивания.\u003Cbr\u003E\u003CSTRONG\u003E – полужирный шрифт.\u003Cbr\u003E\u003C\u002FSTRONG\u003E – отмена полужирного шрифта.\u003Cbr\u003E\u003CBIG\u003E – увеличение шрифта относительно текущего.\u003Cbr\u003E\u003C\u002FBIG\u003E – отмена увеличения шрифта относительно текущего.\u003Cbr\u003E\u003CSMALL\u003E – уменьшение шрифта относительно текущего.\u003Cbr\u003E\u003C\u002FSMALL\u003E – отмена уменьшения шрифта относительно текущего.\u003Cbr\u003EВведя в Блокноте HTML-код и сохранив файл в формате htm, можно запустить его, и в окне Internet Exploter отобразится содержание документа.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E6\u003Cbr\u003E\u003Cp\u003E\u003CBR\u003E – переход на следующую строку.\u003Cbr\u003E\u003CPRE\u003E – отображение без изменения форматирования. \u003Cbr\u003E\u003C\u002FPRE\u003E – отмена отображения без изменения форматирования. \u003Cbr\u003EПример действия этого тега:\u003Cbr\u003Eпервый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом. \u003Cbr\u003E\u003Cbr\u003E\u003CSUP\u003E – текст сдвигается вверх (верхний индекс).\u003Cbr\u003E\u003C\u002FSUP\u003E – отмена сдвига.\u003Cbr\u003E\u003CSUB\u003E – текст сдвигается вниз (нижний индекс).\u003Cbr\u003E\u003C\u002FSUB\u003E – отмена сдвига.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E7\u003Cbr\u003E\u003Cp\u003E\u003CFONT\u003E – изменение шрифта. \u003Cbr\u003E\u003C\u002FFONT\u003E – отмена действия шрифта. \u003Cbr\u003EАтрибуты тега \u003CFONT\u003E\u003Cbr\u003ECOLOR= «название цвета или его \tшестнадцатеричный код»\u003Cbr\u003Eизменение цвета текста.\u003Cbr\u003EНапример, чтобы в окне обозревателя \u003Cbr\u003Eтекст отображался красным цветом, нужно ввести в HTML-код такую команду:\u003Cbr\u003E\u003CFONT СOLOR= red\u003E текст \u003C\u002FFONT\u003E\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E8\u003Cbr\u003E\u003Cp\u003EШестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop. \u003Cbr\u003EВ палитре инструментов подвести указатель мыши к цвету переднего плана или цвету фона. Двойным щелчком левой кнопки мыши на цвете переднего плана или фона можно запустить диалоговое окно Сборщик цветов. \u003Cbr\u003EВ нижней части этого окна справа есть поле (на рисунке оно обведено), в котором отображён соответствующий данному цвету шестнадцатеричный код. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E","\u003Cp\u003E9\u003Cbr\u003E\u003Cp\u003EFACE = название шрифта – изменение гарнитуры (начертания) шрифта.\t \u003Cbr\u003ESIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.\u003Cbr\u003EАтрибуты могут перечисляться через пробел в произвольном порядке.\u003Cbr\u003EПример записи и результат действия этих тегов.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЛучше, однако, не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные. \u003Cbr\u003E","\u003Cp\u003E10\u003Cbr\u003E\u003Cp\u003EЛинии\u003Cbr\u003E\u003CHR\u003E\u003Cbr\u003E Создает горизонтальные линии. \u003Cbr\u003EАтрибуты тега \u003CHR\u003E\u003Cbr\u003ESIZE =толщина линии в пикселах\u003Cbr\u003EWIDTH= ширина линии в пикселах или 80%\u003Cbr\u003E \t LEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003E CENTER\u003Cbr\u003EВыравнивание линии относительно ширины страницы\u003Cbr\u003E\u003CP\u003E – абзац.\u003Cbr\u003E\u003C\u002FP\u003E – конец абзаца. \u003Cbr\u003EАтрибуты тега \u003CP\u003E для выравнивания текста\u003Cbr\u003EАтрибуту ALIGN может быть присвоено одно из 4-х значений:\u003Cbr\u003E \t\tLEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003E CENTER\u003Cbr\u003E \t\tJUSTIFY\t \u003Cbr\u003EПозволяет выравнивать текст по левому, правому краю по центру или по ширине. \u003Cbr\u003EПример записи и результат действия этого тега с различными значениями атрибутов.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E11\u003Cbr\u003E\u003Cp\u003EФон страницы задается в начале основной части документа, т.е. атрибутами тега \u003CBODY\u003E.\u003Cbr\u003EАтрибуты тега \u003CBODY\u003E для изменения \u003Cbr\u003Eцвета текста и фона \u003Cbr\u003ETEXT= название цвета\t или его код \t\u003Cbr\u003EЗадает цвет текста.\u003Cbr\u003EBGCOLOR= название цвета или его код \u003Cbr\u003EЗадает цвет фона. \u003Cbr\u003EПример записи и результат действия этого тега.\u003Cbr\u003EBACKGROUND= имя файла\u003Cbr\u003EИспользование в качестве фона изображения из файла. Изображение-текстуру можно создать в графическом редакторе.\u003Cbr\u003EBGPROPERTIES=FIXED\u003Cbr\u003EСоздание фона – «водяного знака»\u003Cbr\u003E(фона, который не перемещается вместе с текстом).\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание фона\u003Cbr\u003E","\u003Cp\u003E12\u003Cbr\u003E\u003Cp\u003EВставка графических изображений\u003Cbr\u003E\u003CIMG SRC = имя файла.расширение \u003E \u003Cbr\u003E вставка картинки из файла. \u003Cbr\u003EАтрибуты тега \u003CIMG\u003E\u003Cbr\u003ESRC= имя файла.расширение\u003Cbr\u003EALT= название картинки или поясняющий текст\u003Cbr\u003EИспользуется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку.\u003Cbr\u003EWIDTH = ширина (в пикселах или в %)\u003Cbr\u003EHIGHT = высота (в пикселах или в %)\u003Cbr\u003EBORDER = число в пикселах \u003Cbr\u003EОпределяет рамку вокруг изображения.\u003Cbr\u003EHSPACE = число в пикселах\u003Cbr\u003EVSPACE = число в пикселах\u003Cbr\u003EОпределяют горизонтальный и вертикальный отступ вокруг изображения соответственно.\u003Cbr\u003EПример записи и результат действия этого тега с различными значениями атрибутов.\u003Cbr\u003E\t \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВсе файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу. \u003Cbr\u003E","\u003Cp\u003E13\u003Cbr\u003E\u003Cp\u003E\t\tLEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003ECENTER\u003Cbr\u003E\t\u003Cbr\u003EИспользуется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом. \u003Cbr\u003E \t LEFT\u003Cbr\u003E CLEAR = RIGHT\u003Cbr\u003E\t\t ALL\u003Cbr\u003EИспользуется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом. \u003Cbr\u003EПример записи и результат действия тега с различными значениями атрибутов.\u003Cbr\u003E\t \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №1\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EЕсли картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке. \u003Cbr\u003E","\u003Cp\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E14\u003Cbr\u003EВставка видео и звука\t\u003Cbr\u003E\u003CBGSOUND SRC = имя файла.расширение \u003E \u003Cbr\u003EВставка звукового файла. \u003Cbr\u003E\t\u003Cbr\u003E \u003CIMG DYNSRC = имя файла.расширение \u003E \u003Cbr\u003EВставка видео файла. \u003Cbr\u003E\u003CEMBED SRC = имя файла.расширение \u003E \u003Cbr\u003EВставка видео или звукового файла (с панелью управления).\u003Cbr\u003EАтрибут тегов \u003CBGSOUND SRC\u003E, \u003CIMG DYNSRC\u003E \u003CEMBED SRC\u003E\u003Cbr\u003E \tn \t\t true\u003Cbr\u003ELOOP = INFINITE AUTOSTART= f\talse\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №2\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EЕсли видео не отображается, возможно, неправильно указано имя файла, или его расширение, или файл отсутствует в нужной папке. \u003Cbr\u003E\u003Cp\u003EКоличество повторений видео или звукового клипа и непрерывное повторение соответственно.\u003Cbr\u003E\u003Cp\u003EАвтоматическое воспроизведение и воспроизведение при нажатии кнопки соответственно.\u003Cbr\u003E","\u003Cp\u003E15\u003Cbr\u003EСписки\u003Cbr\u003EЕсть 2 вида списков: ненумерованные\u003Cbr\u003E(маркированные) и нумерованные.\u003Cbr\u003EНенумерованные списки:\u003Cbr\u003E\u003CUL\u003E (Unordered List) – начало списка\u003Cbr\u003E\u003C\u002FUL\u003E – конец списка.\u003Cbr\u003E\u003CLI\u003E (List Item) – элемент списка.\u003Cbr\u003EАтрибут тега \u003CUL\u003E\u003Cbr\u003E\t \tDISC\u003Cbr\u003E TYPE = \tCIRCLE\u003Cbr\u003ESQUARE\u003Cbr\u003EОпределяет вид маркера\u003Cbr\u003EПример записи и результат действия тегов.\t\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","Нумерованные списки:\u003Cbr\u003E\u003COL\u003E (Ordered List) – начало списка.\u003Cbr\u003E\u003C\u002FOL\u003E – конец списка.\u003Cbr\u003E\u003CLI\u003E (List Item) – элемент списка.\u003Cbr\u003EАтрибуты тега \u003COL\u003E\u003Cbr\u003E\t\t1\u003Cbr\u003E TYPE = \t A\u003Cbr\u003E I\u003Cbr\u003E …\u003Cbr\u003EОпределяет тип нумерации: арабскими цифрами, русскими буквами, римскими цифрами и т.д.\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E16\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №3\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","Таблицы\u003Cbr\u003E\u003CTABLE\u003E – начало таблицы.\u003Cbr\u003E\u003C\u002FTABLE\u003E – конец таблицы.\u003Cbr\u003E\u003CCAPTION\u003E – начало заголовка таблицы.\u003Cbr\u003E \u003C\u002FCAPTION\u003E – конец заголовка таблицы.\u003Cbr\u003EЗаголовок располагается прямо по центру относительно ширины таблицы.\u003Cbr\u003E\u003CTH\u003E (Table Header) – начало заголовков столбцов или строк таблицы.\u003Cbr\u003E\u003C\u002FTH\u003E – конец заголовков столбцов или строк таблицы.\u003Cbr\u003E\u003CTR\u003E (Table Row) – начало строки таблицы.\u003Cbr\u003E\u003C\u002FTR\u003E – конец строки таблицы.\u003Cbr\u003E\u003CTD\u003E – начало ячейки таблицы.\u003Cbr\u003E\u003C\u002FTD\u003E – конец ячейки таблицы.\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E17\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","Атрибуты тега \u003CTABLE\u003E\u003Cbr\u003EWIDTH=ширина таблицы в пикселах или %\u003Cbr\u003E \u003Cbr\u003EBORDER=ширина границы таблицы в пикселах или %\u003Cbr\u003EЕсли она равна нулю – границы становятся невидимы.\u003Cbr\u003ECELLSPACING= ширина промежутков между ячейками в пикселах или %\u003Cbr\u003ECELLPADDING= ширина промежутков между содержимым ячейки и её границами в пикселах или %\u003Cbr\u003EАтрибуты тега \u003CTH\u003E, \u003CTR\u003E, \u003CTD\u003E\u003Cbr\u003EТаблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются.\u003Cbr\u003EROWSPAN = количество объединяемых строк \u003Cbr\u003ECOLSPAN = количество объединяемых столбцов\u003Cbr\u003EBGCOLOR = цвет фона заголовка, строки, ячейки\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E18\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №4\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","Бегущая строка\u003Cbr\u003E\u003CMARQUEE\u003E – начало бегущей строки.\u003Cbr\u003E\u003C\u002FMARQUEE\u003E– конец бегущей строки. \u003Cbr\u003EФрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.\u003Cbr\u003EАтрибуты тега \u003CMARQUEE\u003E \u003Cbr\u003EWIDTH = ширина области бегущей строки в пикселах или \u003Cbr\u003Eв % от высоты экрана\u003Cbr\u003EBGCOLOR = название цвета или его код\u003Cbr\u003EОпределяет цвет фона бегущей строки.\u003Cbr\u003E\u003Cbr\u003EDIRECTION = LEFT\t\u003Cbr\u003E\t RIGHT \t \t\t\t \u003Cbr\u003EОпределяет направление бегущей строки.\t\t \u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E19\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\t n\u003Cbr\u003ELOOP = INFINITE\u003Cbr\u003EОпределяет количество «прокруток» бегущей \u003Cbr\u003Eстроки: при первом значении атрибута – n , при \u003Cbr\u003Eвтором значении атрибута – бесконечно (по умолчанию).\t \u003Cbr\u003E \t TOP \u003Cbr\u003EALIGN = MIDDLE\u003Cbr\u003EBOTTOM\u003Cbr\u003EПозволяет разместить текст в верхней, средней или нижней части области бегущей строки.\u003Cbr\u003E\t \u003Cbr\u003E \t \t SCROLL \u003Cbr\u003E BEHAVIOR = SLADE\u003Cbr\u003E ALTERNATE\u003Cbr\u003EОпределяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.\u003Cbr\u003ESCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]\u003Cbr\u003E\t\u003Cbr\u003EHIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E20\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E","\u003Cp\u003EФормат тега, создающего ссылку на другой \u003Cbr\u003Eдокумент:\u003Cbr\u003E\u003CA HREF= имя файла. расширение \u003Eактивный \u003Cbr\u003Eтекст или изображение\u003C\u002FA\u003E\u003Cbr\u003EЕсли файл находится в другой папке, то нужно \u003Cbr\u003Eуказывать путь к нему.\u003Cbr\u003EЕсли создается ссылка на ресурс Интернета, то нужно \u003Cbr\u003Eуказать его URL: \u003Cbr\u003E\u003CA HREF= URL-адрес \u003Eактивный текст или изображение\u003C\u002FA\u003E\u003Cbr\u003EМожно организовать сообщение по электронной почте\u003Cbr\u003E\u003CA HREF= mailto:адрес электронной почты \u003Eактивный текст или изображение\u003C\u002FA\u003E\u003Cbr\u003EАтрибуты тега \u003CBODY\u003E для задания цвета ссылок\u003Cbr\u003ELINK= цвет или код цвета\u003Cbr\u003EЗадает цвет ссылки.\u003Cbr\u003EVLINK= цвет или код цвета\u003Cbr\u003EЗадает цвет просмотренной ссылки\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E21\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EALINK= цвет или код цвета\u003Cbr\u003EЗадает цвет выбранной ссылки\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №5\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E22\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EСсылки на метки\u003Cbr\u003EМожно организовать ссылку на другую часть \u003Cbr\u003Eэтого же документа, если предварительно расставить в начале таких частей метки.\u003Cbr\u003E\u003CA HREF= #имя метки \u003Eактивный текст или изображение \u003C\u002FA\u003E \u003Cbr\u003EСоздает ссылку на метку в текущем HTML-документе:\u003Cbr\u003E\u003CA NAME= имя метки \u003Eначало текстового фрагмента \u003C\u002FA\u003E \u003Cbr\u003EМожно также создать ссылку на метку в другом документе:\u003Cbr\u003E\u003CA HREF= имя файла#имя метки \u003Eактивный текст или изображение \u003C\u002FA\u003E \u003Cbr\u003EПример записи и результат действия тегов.\t\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №6\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E23\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EКадры (frames) – это независимые части, \u003Cbr\u003Eна которые можно разбить окно браузера, и в\u003Cbr\u003Eкаждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками. \u003Cbr\u003EКоличество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:\u003Cbr\u003E\u003CFRAMESET\u003E \u003Cbr\u003EОн пределяет фреймовую структуру.\u003Cbr\u003E\u003C\u002FFRAMESET\u003E\u003Cbr\u003EЗавершает определение фреймовой структуры. \u003Cbr\u003E\u003CFRAME SRC=имя файла.расширение\u003E\u003Cbr\u003EПозволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.\u003Cbr\u003EПример записи и результат действия тегов.\u003Cbr\u003E\u003Cp\u003EИспользование тега \u003CFRAMESET\u003E исключает использование тега \u003CBODY\u003E!\t\u003Cbr\u003E\u003Cp\u003EОпределяя структуру, кадры задают сверху вниз и слева направо.\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E24\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EАтрибуты тега \u003CFRAME\u003E \u003Cbr\u003ENAME = имя кадра\t\t\u003Cbr\u003EЗадает имя кадра. \u003Cbr\u003EЭто имя потом используется в качестве значения атрибута target в теге \u003CA HREF\u003E для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре. \u003Cbr\u003EПример записи ссылок с атрибутом target.\t\u003Cbr\u003ENORESIZE\u003Cbr\u003EОзначает запрет перемещения мышкой границы между кадрами.\u003Cbr\u003E no\u003Cbr\u003EFRAMEBORDER=\u003Cbr\u003E yes\u003Cbr\u003EОзначает наличие или отсутствие границы между кадрами.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №7\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E25\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EФреймовую структуру можно создать также с помощью тегов для создания таблиц и тега \u003Cbr\u003E\u003CIFRAME\u003E \u003Cbr\u003E\u003C\u002FIFRAME\u003E\u003Cbr\u003EЭтот тег имеет такие же атрибуты, как и тег \u003CFRAME\u003E.\u003Cbr\u003EУдобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.\u003Cbr\u003EПример записи и результат действия тегов.\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №8\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E26\u003Cbr\u003E\u003Cp\u003EМожно создавать ссылки с разных частей одного изображения, если предварительно выделить эти части (области) и определить их координаты. Такое изображение называют картой (map).\u003Cbr\u003EИзображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения. \u003Cbr\u003EТег, который позволяет определить карту: \u003Cbr\u003E\u003CMAP\u003E\u003Cbr\u003E\u003C\u002FMAP\u003E\u003Cbr\u003EМежду открывающим и закрывающим тегами \u003CMAP\u003E определяются области карты при помощи тега\u003Cbr\u003E\u003CAREA\u003E\u003Cbr\u003EДля каждой области карты должен быть создан свой элемент \u003CAREA\u003E, который должен включать атрибут, определяющий ссылку HREF= адрес ссылки\u003Cbr\u003EАтрибуты тега \u003CMAP\u003E\u003Cbr\u003EЗадаётся имя изображения-карты при помощи \u003Cbr\u003Eатрибута NAME.\u003Cbr\u003ENAME= имя\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E27\u003Cbr\u003E\u003Cp\u003EАтрибуты тега \u003CAREA\u003E\u003Cbr\u003Ealt= название области изображения-карты \u003Cbr\u003EЭто атрибут для задания текста, заменяющего изображение-карту, не является обязательным.\u003Cbr\u003ETARGET= имя фрейма \u003Cbr\u003EОпределяет имя фрейма для загрузки документа, на который делается ссылка с данной области.\u003Cbr\u003EАтрибут, определяющий форму области на карте: \u003Cbr\u003E\t rect \u003Cbr\u003E SHAPE = poly\u003Cbr\u003E\t сircle\u003Cbr\u003E\t\t point\u003Cbr\u003ECOORDS =x,y,x1,y1 \u003Cbr\u003EОписывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).\u003Cbr\u003ECOORDS =x,y,x1,y1… xn,yn\u003Cbr\u003EОписывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).\t\u003Cbr\u003ECOORDS =x,y,r\u003Cbr\u003EОписывает координаты сircle (значения атрибута – координаты центра окружности и радиус).\t\u003Cbr\u003ECOORDS =x,y\u003Cbr\u003EОписывает координаты точки point (значения атрибута – её координаты).\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EОпределение координат областей для\u003Cbr\u003Eизображения-карты. \u003Cbr\u003E","\u003Cp\u003E28\u003Cbr\u003E\u003Cp\u003EБолее простой способ получить значения координат – воспользоваться \u003Cbr\u003E\u003Cbr\u003EОн устанавливается дополнительно и совместим со всеми версиями редактора Adobe Photoshop. \u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EОпределение координат областей для\u003Cbr\u003Eизображения-карты с помощью специального фильтра. \u003Cbr\u003E\u003Cp\u003Eспециальным фильтром. \u003Cbr\u003E","\u003Cp\u003E29\u003Cbr\u003E\u003Cp\u003EУдобно использовать изображение-карту, когда страница разделена на два фрейма. \u003Cbr\u003EВ одном фрейме можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.\u003Cbr\u003EПример записи и результат действия тегов\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №9\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E30\u003Cbr\u003E\u003Cp\u003EWeb-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также на сайтах, посвященных творчеству художников, дизайнеров. \u003Cbr\u003EWeb-галерея выглядит как таблица, в ячейках которой расположены миниатюры, с которых есть ссылки на эти же изображения большего формата.\u003Cbr\u003E\u003Cp\u003EСоздание Web-галереи. \u003Cbr\u003E\u003Cp\u003EWeb-галерея\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №10\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E31\u003Cbr\u003E\u003Cp\u003EДля создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы.\u003Cbr\u003EФорма – это набор элементов, знакомых нам по диалоговым окнам, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. \u003Cbr\u003EФорма создается с помощью тега:\u003Cbr\u003E\u003CFORM\u003E\u003Cbr\u003E\u003C\u002FFORM\u003E\u003Cbr\u003EПример заполняемой формы: \u003Cbr\u003EВ пределах тега \u003CFORM\u003E для создания разных полей используют теги \u003CINPUT\u003E, \u003CSELECT\u003E и \u003CTEXTAREA\u003E с разными атрибутами, как показано в Примере.\u003Cbr\u003E\u003Cp\u003EСоздание форм\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №11\u003Cbr\u003E\u003Cp\u003EПример\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1613350866,related:[{id:400905,name:"Открытые уроки",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fotkrytye-uroki",jpg:"jpg\u002F400905"},{id:389333,name:"Николай Корнильевич Пимоненко",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnikolaj-kornilevich-pimonenko",jpg:"jpg\u002F389333"},{id:308952,name:"Ватикан",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvatikan-3",jpg:"jpg\u002F308952"},{id:466140,name:"ЗАКОНОДАТЕЛЬНАЯ ОСНОВА ИЗБИРАТЕЛЬНОЙ СИСТЕМЫ ФЕДЕРАЛЬНЫЙ ЗАКОН \"О СРЕДСТВАХ МАССОВОЙ ИНФОРМАЦИИ\"",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fzakonodatelnaya-osnova-izbiratelnoj-sistemy-federalnyj-zakon-o-sredstvax-massovoj-informacii",jpg:"jpg\u002F466140"},{id:944101,name:"Стюардесса и её обязанности",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstyuardessa-i-eyo-obyazannosti",jpg:"jpg\u002F944101"},{id:363746,name:"Биг Бен на английском",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbig-ben-na-anglijskom",jpg:"jpg\u002F363746"},{id:344281,name:"Векторная графика",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvektornaya-grafika-2",jpg:"jpg\u002F344281"},{id:1184887,name:"презентация продукта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentatsiya-produkta-1",jpg:"jpg\u002F1184887"},{id:294360,name:"Презентация на тему Формирование познавательной активности детей через экологическое воспитание",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-formirovanie-poznavatelnoj-aktivnosti-detej-cherez-ekologicheskoe-vospitanie",jpg:"jpg\u002F294360"},{id:303124,name:"Презентация на тему Правила по русскому языку ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-pravila-po-russkomu-yazyku",jpg:"jpg\u002F303124"},{id:279436,name:" \r\n Presentation Title ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstroitelnyyppt",jpg:"jpg\u002F279436"},{id:392244,name:"Курочкина Наталья Николаевна, Учитель начальных классов. МКОУ«Подбельская ООШ», Москаленский район , Омская область.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkurochkina-natalya-nikolaevna--uchitel-nachalnyx-klassov-mkoupodbelskaya-oosh--moskalenskij-rajon---omskaya-oblast",jpg:"jpg\u002F392244"},{id:359836,name:"Предложения с обращениями 8 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpredlozheniya-s-obrashheniyami-8-klass",jpg:"jpg\u002F359836"},{id:391531,name:"Стихи прекрасное Творенье!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstixi-prekrasnoe-tvorene",jpg:"jpg\u002F391531"},{id:868129,name:"Виды рекламы по рекламодателям",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvidy-reklamy-po-reklamodatelyam",jpg:"jpg\u002F868129"},{id:957235,name:"Инклюзивное образование",href:"\u002Fprezentacii-na-razlichnye-temy\u002Finklyuzivnoe-obrazovanie-28",jpg:"jpg\u002F957235"},{id:1018104,name:"Что такое выборы?",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fchto-takoe-vybory-5",jpg:"jpg\u002F1018104"},{id:354577,name:"Пословицы и поговорки о воде",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fposlovicy-i-pogovorki-o-vode",jpg:"jpg\u002F354577"},{id:449721,name:"9. Останавливается ли Гольфстрим? Согласно апокалиптическим прогнозам из–за глобального потепления Гольфстрим может остановить",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-3495",jpg:"jpg\u002F449721"},{id:865467,name:"Русские национальные виды спорта и игры",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frusskie-natsionalnye-vidy-sporta-i-igry-9",jpg:"jpg\u002F865467"},{id:421183,name:"Сервировка стола Культура поведения за столом",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fservirovka-stola-kulytura-povedeniya-za-stolom",jpg:"jpg\u002F421183"},{id:380755,name:"Повелительное наклонение the imperative mood",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpovelitelnoe-naklonenie-the-imperative-mood",jpg:"jpg\u002F380755"},{id:422002,name:"Заместитель начальника управления Алтайского края по государственному регулированию цен и тарифов\t\t\t\t\t\t Ситникова Ольга Валерьев",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-2112",jpg:"jpg\u002F422002"},{id:429432,name:"For environmental safety and public participation",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffor-environmental-safety-and-public-participation",jpg:"jpg\u002F429432"},{id:389570,name:"Субботин, это только для тебя!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsubbotin--eto-tolko-dlya-tebya",jpg:"jpg\u002F389570"},{id:344879,name:"Доспехи средневекового рыцаря",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdospexi-srednevekovogo-rycarya",jpg:"jpg\u002F344879"},{id:272448,name:"Презентация на тему До свидания, начальная школа",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-do-svidaniya--nachalnaya-shkola",jpg:"jpg\u002F272448"},{id:1110097,name:"Вторая жизнь Храма городца Ижеславец",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvtoraya-zhizn-hrama-gorodtsa-izheslavets",jpg:"jpg\u002F1110097"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fsovremennye-podxody-k-soprovozhdeniyu-procedury-attestacii-pedagogicheskix-rabotnikov",next_name:"Современные подходы к сопровождению процедуры аттестации педагогических работников",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fsertifikat-socialnoj-bezotvetstvennosti",prev_name:"Сертификат социальной безответственности"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:L,SITE_HOST:"slaidy.com",SITE_LANG:M,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:L,short_name:b,description:b,lang:M,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:k,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:T,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:n,main_text:b,main_title:o,main_description:p,main_keywords:q,main_image:b},app:{logo_image:r,logo_image_width:i,logo_image_height:j,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:k,header_bg:l,accent:H}},social:I,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,32,"#000000","#ffffff",1,"Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg","Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Разное","Основы HTML ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512")) или %
Если она равна нулю – границы становятся невидимы.
CELLSPACING= ширина промежутков между ячейками в пикселах или %
CELLPADDING= ширина промежутков между содержимым ячейки и её границами в пикселах или %
Атрибуты тега

Бегущая строка
– начало бегущей строки.
– конец бегущей строки.
Фрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.
Атрибуты тега
WIDTH = ширина области бегущей строки в пикселах или
в % от высоты экрана
BGCOLOR = название цвета или его код
Определяет цвет фона бегущей строки.
DIRECTION = LEFT
RIGHT
Определяет направление бегущей строки.
Пример записи и результат действия тегов с различными значениями атрибутов.
19
1
2
Бегущая строка
2
1
Слайд 21
n
LOOP = INFINITE
Определяет количество «прокруток» бегущей
строки: при первом значении атрибута –
n , при
втором значении атрибута – бесконечно (по умолчанию).
TOP
ALIGN = MIDDLE
BOTTOM
Позволяет разместить текст в верхней, средней или нижней части области бегущей строки.
SCROLL
BEHAVIOR = SLADE
ALTERNATE
Определяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.
SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]
HIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )
Пример записи и результат действия тегов с различными значениями атрибутов.
20
1
2
2
1
Бегущая строка
Слайд 22
Формат тега, создающего ссылку на другой
документ:
активный
текст или изображение
Если файл находится в другой папке, то нужно
указывать путь к нему.
Если создается ссылка на ресурс Интернета, то нужно
указать его URL:
активный текст или изображение
Можно организовать сообщение по электронной почте
активный текст или изображение
Атрибуты тега для задания цвета ссылок
LINK= цвет или код цвета
Задает цвет ссылки.
VLINK= цвет или код цвета
Задает цвет просмотренной ссылки
Пример записи и результат действия тегов с различными значениями атрибутов.
21
1
2
2
Создание ссылок
ALINK= цвет или код цвета
Задает цвет выбранной ссылки
Практическая
работа №5
Материалы для
работы
1
Слайд 23
22
1
2
2
1
Создание ссылок
Ссылки на метки
Можно организовать ссылку на другую часть
этого же документа,
если предварительно расставить в начале таких частей метки.
активный текст или изображение
Создает ссылку на метку в текущем HTML-документе:
начало текстового фрагмента
Можно также создать ссылку на метку в другом документе:
активный текст или изображение
Пример записи и результат действия тегов.
Практическая
работа №6
Материалы для
работы
Слайд 24
23
Создание фреймов
Кадры (frames) – это независимые части,
на которые можно разбить окно
браузера, и в
каждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками.
Количество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:
Он пределяет фреймовую структуру.
Завершает определение фреймовой структуры.
Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.
Пример записи и результат действия тегов.
Использование тега исключает использование тега !
Определяя структуру, кадры задают сверху вниз и слева направо.
1
1
2
1
2
Слайд 25
24
1
Создание фреймов
Атрибуты тега
NAME = имя кадра
Задает имя кадра.
Это имя
потом используется в качестве значения атрибута target в теге
для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре.
Пример записи ссылок с атрибутом target.
NORESIZE
Означает запрет перемещения мышкой границы между кадрами.
no
FRAMEBORDER=
yes
Означает наличие или отсутствие границы между кадрами.
1
Практическая
работа №7
Материалы для
работы
Слайд 26
25
Создание фреймов
Фреймовую структуру можно создать также с помощью тегов для создания таблиц
и тега
<br>
Этот тег имеет такие же атрибуты, как и тег .
Удобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.
Пример записи и результат действия тегов.
1
2
1
2
Практическая
работа №8
Материалы для
работы
Слайд 27
26
Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти
части (области) и определить их координаты. Такое изображение называют картой (map).
Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.
Тег, который позволяет определить карту:
Между открывающим и закрывающим тегами
определяются области карты при помощи тега
Для каждой области карты должен быть создан свой элемент
, который должен включать атрибут, определяющий ссылку HREF= адрес ссылки
Атрибуты тега
Задаётся имя изображения-карты при помощи
атрибута NAME.
NAME= имя
1
Изображение-карта
1
Слайд 28
27
Атрибуты тега
alt= название области изображения-карты
Это атрибут для задания текста, заменяющего
изображение-карту, не является обязательным.
TARGET= имя фрейма
Определяет имя фрейма для загрузки документа, на который делается ссылка с данной области.
Атрибут, определяющий форму области на карте:
rect
SHAPE = poly
сircle
point
COORDS =x,y,x1,y1
Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
COORDS =x,y,x1,y1… xn,yn
Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
COORDS =x,y,r
Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
COORDS =x,y
Описывает координаты точки point (значения атрибута – её координаты).
Изображение-карта
Определение координат областей для
изображения-карты.
Слайд 29
28
Более простой способ получить значения координат – воспользоваться
Он устанавливается дополнительно и
совместим со всеми версиями редактора Adobe Photoshop.
Изображение-карта
Определение координат областей для
изображения-карты с помощью специального фильтра.
специальным фильтром.
Слайд 30
29
Удобно использовать изображение-карту, когда страница разделена на два фрейма.
В одном фрейме
можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.
Пример записи и результат действия тегов
Изображение-карта
Практическая
работа №9
Материалы для
работы
1
2
2
1
Слайд 31
30
Web-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также
на сайтах, посвященных творчеству художников, дизайнеров.
Web-галерея выглядит как таблица, в ячейках которой расположены миниатюры, с которых есть ссылки на эти же изображения большего формата.
Создание Web-галереи.
Web-галерея
Практическая
работа №10
Материалы для
работы
Имя файла: Основы-HTML.pptx
Количество просмотров: 208
Количество скачиваний: 1
Скачать
- Предыдущая
Сертификат социальной безответственности
Следующая -
Современные подходы к сопровождению процедуры аттестации педагогических работников
Похожие презентации
Открытые уроки
Николай Корнильевич Пимоненко
Ватикан
ЗАКОНОДАТЕЛЬНАЯ ОСНОВА ИЗБИРАТЕЛЬНОЙ СИСТЕМЫ ФЕДЕРАЛЬНЫЙ ЗАКОН "О СРЕДСТВАХ МАССОВОЙ ИНФОРМАЦИИ"
Стюардесса и её обязанности
Биг Бен на английском
Векторная графика
презентация продукта
Презентация на тему Формирование познавательной активности детей через экологическое воспитание
Презентация на тему Правила по русскому языку
Presentation Title
Курочкина Наталья Николаевна, Учитель начальных классов. МКОУ«Подбельская ООШ», Москаленский район , Омская область.
Предложения с обращениями 8 класс
Стихи прекрасное Творенье!
Виды рекламы по рекламодателям
Инклюзивное образование
Что такое выборы?
Пословицы и поговорки о воде
9. Останавливается ли Гольфстрим? Согласно апокалиптическим прогнозам из–за глобального потепления Гольфстрим может остановить
Русские национальные виды спорта и игры
Сервировка стола Культура поведения за столом
Повелительное наклонение the imperative mood
Заместитель начальника управления Алтайского края по государственному регулированию цен и тарифов Ситникова Ольга Валерьев
For environmental safety and public participation
Субботин, это только для тебя!
Доспехи средневекового рыцаря
Презентация на тему До свидания, начальная школа
Вторая жизнь Храма городца Ижеславец
(function(d,s){d.getElementById("licnt7D89").src=
"https://counter.yadro.ru/hit?t12.1;r"+escape(d.referrer)+
((typeof(s)=="undefined")?"":";s"+s.width+"*"+s.height+"*"+
(s.colorDepth?s.colorDepth:s.pixelDepth))+";u"+escape(d.URL)+
";h"+escape(d.title.substring(0,150))+";"+Math.random()})
(document,screen)
Обратная связь
Для правообладателей
Email:
Нажмите что бы посмотреть
window.__NUXT__=(function(a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z,A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T){return {data:{meta:{result:{meta:{h1:n,main_text:b,main_title:o,main_description:p,main_keywords:q,main_image:b},app:{logo_image:r,logo_image_width:i,logo_image_height:j,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:k,header_bg:l,accent:H}},social:I}},categories:{result:[{id:m,ordering:a,name:"Алгебра",pseudoname:"prezentacii-po-algebre"},{id:2,ordering:a,name:"Английский язык",pseudoname:"prezentacii-po-angliyskomu-yaziku"},{id:3,ordering:a,name:"Астрономия",pseudoname:"prezentacii-po-astronomii"},{id:4,ordering:a,name:"Биология",pseudoname:"prezentacii-po-biologii"},{id:5,ordering:a,name:"География",pseudoname:"prezentacii-po-geografii"},{id:6,ordering:a,name:"Геометрия",pseudoname:"prezentacii-po-geometrii"},{id:7,ordering:a,name:"Информатика",pseudoname:"prezentacii-po-informatike"},{id:8,ordering:a,name:"История",pseudoname:"prezentacii-po-istorii"},{id:9,ordering:a,name:"Литература",pseudoname:"prezentacii-po-literature"},{id:10,ordering:a,name:"Математика",pseudoname:"prezentacii-po-matematike"},{id:11,ordering:a,name:"Медицина",pseudoname:"prezentacii-po-medicine"},{id:h,ordering:a,name:"Музыка",pseudoname:"prezentacii-po-musice"},{id:13,ordering:a,name:"МХК",pseudoname:"prezentacii-po-mkhk"},{id:14,ordering:a,name:"ОБЖ",pseudoname:"prezentacii-po-obzh"},{id:15,ordering:a,name:"Обществознание",pseudoname:"prezentacii-po-obshhestvoznaniju"},{id:17,ordering:a,name:"Педагогика",pseudoname:"prezentacii-po-pedagogike"},{id:18,ordering:a,name:"Немецкий язык",pseudoname:"prezentacii-po-nemezkomy-yaziku"},{id:20,ordering:a,name:"Русский язык",pseudoname:"prezentacii-po-russkomu-yazyku"},{id:21,ordering:a,name:"Технология",pseudoname:"prezentacii-po-tehnologii"},{id:22,ordering:a,name:"Физика",pseudoname:"prezentacii-po-fizike"},{id:23,ordering:a,name:"Философия",pseudoname:"prezentacii-po-filosofii"},{id:24,ordering:a,name:"Химия",pseudoname:"prezentacii-po-himii"},{id:25,ordering:a,name:"Экология",pseudoname:"prezentacii-po-ehkologii"},{id:26,ordering:a,name:"Экономика",pseudoname:"prezentacii-po-ekonomike"},{id:27,ordering:a,name:"Детские презентации",pseudoname:"detskie-prezentacii"},{id:i,ordering:a,name:"Шаблоны презентаций",pseudoname:"shablony-dlya-prezentacii"},{id:29,ordering:a,name:J,pseudoname:"prezentacii-na-razlichnye-temy"},{id:48,ordering:a,name:"Культурология",pseudoname:"kulturologiya"},{id:16,ordering:m,name:"Окружающий мир",pseudoname:"prezentacii-po-okruzhayushhemu-miru"}]},item:{result:{id:420349,name:"Основы HTML",category:J,count:j,jpg:"jpg\u002F420349",hits:208,download:m,h1:K,meta:{h1:K,title:"Основы HTML презентация",description:"Основы HTML презентация, доклад, проект, Разное ",keywords:"Основы HTML, презентация, доклад, проект, скачать презентацию на тему, PowerPoint, скачати презентацію, фон, шаблон, урок, конспект, класс, школа, класс, Разное",download_link:b},text:"\u003Cp style=\"text-align: justify;\" \u002F\u003EПрезентация на тему Основы HTML, из раздела: Разное.&nbsp; Презентацию в формате PowerPoint (pptx) можно скачать внизу страницы, поделившись ссылкой в социальных сетях! Презентации взяты из открытого доступа или загружены их авторами, администрация сайта не отвечает за достоверность информации в них. Все права принадлежат авторам материалов: \u003Ca href=\"politika-zashchity-avtorskih-prav\"\u003EПолитика защиты авторских прав\u003C\u002Fa\u003E",seo_text:"\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЕсли мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.\u003Cbr\u003EHTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.\u003Cbr\u003EТеги (tags) – команды языка HTML\u003Cbr\u003EДля файлов, являющихся HTML-документами, принято расширение htm или html. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E \u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EФормат тега (правила его записи):\u003Cbr\u003E\u003Cbr\u003E\u003Cтег атрибут=«значение» атрибут=«значение»…\u003E\u003Cbr\u003E\u003Cbr\u003EУ многих тегов есть свои атрибуты. Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами. \u003Cbr\u003EАтрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.\u003Cbr\u003EОсобенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.\u003Cbr\u003EКаждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу \u003CF5\u003E.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E\u003Cbr\u003E\u003Cp\u003EСообщения об ошибках, допущенных в формате тегов, не появляются. \u003Cbr\u003EОшибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому! \u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E",file:"Основы-HTML.pptx",texts:["\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003EОсновы \r\nHTML\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003EОсновы \r\nHTML\u003Cbr\u003E\u003Cp\u003EСлужебные теги\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EСоздание фона\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EWeb-галерея\u003Cbr\u003E\u003Cp\u003EСоздание форм\u003Cbr\u003E","\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЕсли мы загрузим какой-нибудь сайт и выберем в главном меню обозревателя команду Вид | Просмотр HTML-кода, то откроется окно Блокнота и в нем отобразится текст документа, написанный на HTML (Hypertext Markup Language) – на языке разметки гипертекста.\u003Cbr\u003EHTML-документы представляют собой текстовые файлы, в которые встроены специальные команды.\u003Cbr\u003EТеги (tags) – команды языка HTML\u003Cbr\u003EДля файлов, являющихся HTML-документами, принято расширение htm или html. \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E","\u003Cp\u003EФормат тега (правила его записи):\u003Cbr\u003E\u003Cтег атрибут=«значение» атрибут=«значение»…\u003E\u003Cbr\u003EУ многих тегов есть свои атрибуты. Их назначение – уточнять теги, более подробно описывать действия над текстом, графикой или другими объектами. \u003Cbr\u003EАтрибуты можно записывать в произвольном порядке через пробел. Значения атрибутов можно не заключать в кавычки и даже лучше не заключать (если это не два слова!), чтобы не запутаться, т.к. непарные кавычки – это ошибка, из-за которой команда не выполняется.\u003Cbr\u003EОсобенность создания HTML-документа – в том, что создается он в Блокноте, а просматривать его можно в окне обозревателя, например, Internet Explorer.\u003Cbr\u003EКаждый раз, внося изменения в текст HTML-документа, следует его сохранять и обновлять в окне Internet Explorer, выбирая соответствующую команду или кнопку на панели инструментов , или клавишу \u003CF5\u003E.\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСообщения об ошибках, допущенных в формате тегов, не появляются. \u003Cbr\u003EОшибки нужно искать самостоятельно, если результат при просмотре сайта не соответствует ожидаемому! \u003Cbr\u003E\u003Cp\u003EНазначение и основные понятия\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E3\u003Cbr\u003E\u003Cp\u003E\u003CHTML\u003E\u003Cbr\u003E\t \u003CHEAD\u003E\u003Cbr\u003E Служебная информация\u003Cbr\u003E\t\t\u003CTITLE\u003E\u003Cbr\u003E\t\t\tинформация об имени страницы\u003Cbr\u003E\t\t\u003C\u002FTITLE\u003E\u003Cbr\u003E\t \u003Cbr\u003E\t\u003C\u002FHEAD\u003E\u003Cbr\u003E\t\u003Cbr\u003E\t\u003CBODY\u003E\u003Cbr\u003E\t \t\u003Cbr\u003E\t\t\tосновная часть документа\u003Cbr\u003E\t\u003Cbr\u003E\t \u003C\u002FBODY\u003E\u003Cbr\u003E\u003C\u002FHTML\u003E\u003Cbr\u003E\u003Cp\u003EСтруктура HTML-документа\u003Cbr\u003E","\u003Cp\u003E4\u003Cbr\u003E\u003Cp\u003E\u003CHEAD\u003E – начинает блок служебной информации.\u003Cbr\u003E\u003C\u002FHEAD\u003E – завершает блок служебной информации.\u003Cbr\u003E\u003CTITLE\u003E – начинает блок информации, которая будет отображаться в строке заголовка обозревателя.\u003Cbr\u003E\u003C\u002FTITLE\u003E – завершает блок информации, которая будет отображаться в строке заголовка обозревателя.\u003Cbr\u003E\u003CMETA\u003E – содержит служебную информацию. \u003Cbr\u003EКаждый тег \u003CMETA\u003E содержит пару атрибутов name и content, определяющих соответственно тип данных и содержание.\u003Cbr\u003EВарианты: \u003Cbr\u003E\u003CMETA name=Description content=\"содержание страницы\" \u003E\u003Cbr\u003Eописывает краткое содержание страницы.\u003Cbr\u003E\u003CMETA name=keywords content=\"слово1, слово2, …\" \u003E\u003Cbr\u003Eопределяет набор ключевых слов для поиска, облегчающий работу поисковым машинам, а создателю сайта дает больше шансов, что его информация будет найдена.\u003Cbr\u003E\u003CMETA name=Author content=\"Имя автора\" \u003E\u003Cbr\u003Eописывает имя автора страницы.\u003Cbr\u003E\u003CMETA HTTP-EQUIV=refresh content=5 url=http:\u002F\u002Fwww.litolab.narod.ru \u003E\u003Cbr\u003Eчерез 5 секунд автоматически загрузит сайт с указанным адресом, интервал времени и адрес задаем по своему усмотрению.\u003Cbr\u003E\u003Cp\u003EСлужебные теги\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E5\u003Cbr\u003E\u003Cp\u003E\u003CHN\u003E – изменение размера шрифта. \u003Cbr\u003E\u003C\u002FHN\u003E – отмена выбранного размера шрифта. \u003Cbr\u003EN∈[1…6]\t\t\u003Cbr\u003E\u003CB\u003E – полужирный шрифт.\u003Cbr\u003E\u003C\u002FB\u003E – отмена полужирного шрифта.\u003Cbr\u003E\u003CI\u003E – курсив.\u003Cbr\u003E\u003C\u002FI\u003E – отмена курсива.\u003Cbr\u003E\u003CU\u003E – подчёркивание.\u003Cbr\u003E\u003C\u002FU\u003E – отмена подчёркивания.\u003Cbr\u003E\u003CSTRONG\u003E – полужирный шрифт.\u003Cbr\u003E\u003C\u002FSTRONG\u003E – отмена полужирного шрифта.\u003Cbr\u003E\u003CBIG\u003E – увеличение шрифта относительно текущего.\u003Cbr\u003E\u003C\u002FBIG\u003E – отмена увеличения шрифта относительно текущего.\u003Cbr\u003E\u003CSMALL\u003E – уменьшение шрифта относительно текущего.\u003Cbr\u003E\u003C\u002FSMALL\u003E – отмена уменьшения шрифта относительно текущего.\u003Cbr\u003EВведя в Блокноте HTML-код и сохранив файл в формате htm, можно запустить его, и в окне Internet Exploter отобразится содержание документа.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E6\u003Cbr\u003E\u003Cp\u003E\u003CBR\u003E – переход на следующую строку.\u003Cbr\u003E\u003CPRE\u003E – отображение без изменения форматирования. \u003Cbr\u003E\u003C\u002FPRE\u003E – отмена отображения без изменения форматирования. \u003Cbr\u003EПример действия этого тега:\u003Cbr\u003Eпервый абзац отображается так, как введен в блокноте, т.к. на него распространяется действие тега, а второй абзац отображается произвольным образом. \u003Cbr\u003E\u003Cbr\u003E\u003CSUP\u003E – текст сдвигается вверх (верхний индекс).\u003Cbr\u003E\u003C\u002FSUP\u003E – отмена сдвига.\u003Cbr\u003E\u003CSUB\u003E – текст сдвигается вниз (нижний индекс).\u003Cbr\u003E\u003C\u002FSUB\u003E – отмена сдвига.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E7\u003Cbr\u003E\u003Cp\u003E\u003CFONT\u003E – изменение шрифта. \u003Cbr\u003E\u003C\u002FFONT\u003E – отмена действия шрифта. \u003Cbr\u003EАтрибуты тега \u003CFONT\u003E\u003Cbr\u003ECOLOR= «название цвета или его \tшестнадцатеричный код»\u003Cbr\u003Eизменение цвета текста.\u003Cbr\u003EНапример, чтобы в окне обозревателя \u003Cbr\u003Eтекст отображался красным цветом, нужно ввести в HTML-код такую команду:\u003Cbr\u003E\u003CFONT СOLOR= red\u003E текст \u003C\u002FFONT\u003E\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E8\u003Cbr\u003E\u003Cp\u003EШестнадцатеричный код любого цвета можно определить, загрузив графический редактор Adobe Photoshop. \u003Cbr\u003EВ палитре инструментов подвести указатель мыши к цвету переднего плана или цвету фона. Двойным щелчком левой кнопки мыши на цвете переднего плана или фона можно запустить диалоговое окно Сборщик цветов. \u003Cbr\u003EВ нижней части этого окна справа есть поле (на рисунке оно обведено), в котором отображён соответствующий данному цвету шестнадцатеричный код. \u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E","\u003Cp\u003E9\u003Cbr\u003E\u003Cp\u003EFACE = название шрифта – изменение гарнитуры (начертания) шрифта.\t \u003Cbr\u003ESIZE = размер шрифта – изменение размера шрифта фрагмента текста, используется в середине строки, т.к. после окончания своего действия не разбивает строку.\u003Cbr\u003EАтрибуты могут перечисляться через пробел в произвольном порядке.\u003Cbr\u003EПример записи и результат действия этих тегов.\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EЛучше, однако, не использовать «экзотические» шрифты, которых может не оказаться у пользователя при просмотре вашего сайта. В этом случае они автоматически будут заменяться на стандартные. \u003Cbr\u003E","\u003Cp\u003E10\u003Cbr\u003E\u003Cp\u003EЛинии\u003Cbr\u003E\u003CHR\u003E\u003Cbr\u003E Создает горизонтальные линии. \u003Cbr\u003EАтрибуты тега \u003CHR\u003E\u003Cbr\u003ESIZE =толщина линии в пикселах\u003Cbr\u003EWIDTH= ширина линии в пикселах или 80%\u003Cbr\u003E \t LEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003E CENTER\u003Cbr\u003EВыравнивание линии относительно ширины страницы\u003Cbr\u003E\u003CP\u003E – абзац.\u003Cbr\u003E\u003C\u002FP\u003E – конец абзаца. \u003Cbr\u003EАтрибуты тега \u003CP\u003E для выравнивания текста\u003Cbr\u003EАтрибуту ALIGN может быть присвоено одно из 4-х значений:\u003Cbr\u003E \t\tLEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003E CENTER\u003Cbr\u003E \t\tJUSTIFY\t \u003Cbr\u003EПозволяет выравнивать текст по левому, правому краю по центру или по ширине. \u003Cbr\u003EПример записи и результат действия этого тега с различными значениями атрибутов.\u003Cbr\u003E\u003Cp\u003EФорматирование текста\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E11\u003Cbr\u003E\u003Cp\u003EФон страницы задается в начале основной части документа, т.е. атрибутами тега \u003CBODY\u003E.\u003Cbr\u003EАтрибуты тега \u003CBODY\u003E для изменения \u003Cbr\u003Eцвета текста и фона \u003Cbr\u003ETEXT= название цвета\t или его код \t\u003Cbr\u003EЗадает цвет текста.\u003Cbr\u003EBGCOLOR= название цвета или его код \u003Cbr\u003EЗадает цвет фона. \u003Cbr\u003EПример записи и результат действия этого тега.\u003Cbr\u003EBACKGROUND= имя файла\u003Cbr\u003EИспользование в качестве фона изображения из файла. Изображение-текстуру можно создать в графическом редакторе.\u003Cbr\u003EBGPROPERTIES=FIXED\u003Cbr\u003EСоздание фона – «водяного знака»\u003Cbr\u003E(фона, который не перемещается вместе с текстом).\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание фона\u003Cbr\u003E","\u003Cp\u003E12\u003Cbr\u003E\u003Cp\u003EВставка графических изображений\u003Cbr\u003E\u003CIMG SRC = имя файла.расширение \u003E \u003Cbr\u003E вставка картинки из файла. \u003Cbr\u003EАтрибуты тега \u003CIMG\u003E\u003Cbr\u003ESRC= имя файла.расширение\u003Cbr\u003EALT= название картинки или поясняющий текст\u003Cbr\u003EИспользуется в качестве текстового описания к данному изображению, появляется при наведении указателя мыши на картинку.\u003Cbr\u003EWIDTH = ширина (в пикселах или в %)\u003Cbr\u003EHIGHT = высота (в пикселах или в %)\u003Cbr\u003EBORDER = число в пикселах \u003Cbr\u003EОпределяет рамку вокруг изображения.\u003Cbr\u003EHSPACE = число в пикселах\u003Cbr\u003EVSPACE = число в пикселах\u003Cbr\u003EОпределяют горизонтальный и вертикальный отступ вокруг изображения соответственно.\u003Cbr\u003EПример записи и результат действия этого тега с различными значениями атрибутов.\u003Cbr\u003E\t \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВсе файлы с изображениями должны находиться в том же каталоге, что и HTML-документ, или в качестве значения атрибута IMG кроме имени файла и расширения имени файла нужно указывать путь к файлу. \u003Cbr\u003E","\u003Cp\u003E13\u003Cbr\u003E\u003Cp\u003E\t\tLEFT\u003Cbr\u003EALIGN = RIGHT\u003Cbr\u003ECENTER\u003Cbr\u003E\t\u003Cbr\u003EИспользуется, чтобы сдвинуть картинку к левому, правому краю, по центру и установить обтекание картинки текстом. \u003Cbr\u003E \t LEFT\u003Cbr\u003E CLEAR = RIGHT\u003Cbr\u003E\t\t ALL\u003Cbr\u003EИспользуется, чтобы очистить поле слева, справа или с обеих сторон графического объекта, а затем продолжить текст в пустой области за объектом. \u003Cbr\u003EПример записи и результат действия тега с различными значениями атрибутов.\u003Cbr\u003E\t \u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №1\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EЕсли картинка не отображается, возможно неправильно указано имя файла, его расширение, или файл отсутствует в нужной папке. \u003Cbr\u003E","\u003Cp\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E14\u003Cbr\u003EВставка видео и звука\t\u003Cbr\u003E\u003CBGSOUND SRC = имя файла.расширение \u003E \u003Cbr\u003EВставка звукового файла. \u003Cbr\u003E\t\u003Cbr\u003E \u003CIMG DYNSRC = имя файла.расширение \u003E \u003Cbr\u003EВставка видео файла. \u003Cbr\u003E\u003CEMBED SRC = имя файла.расширение \u003E \u003Cbr\u003EВставка видео или звукового файла (с панелью управления).\u003Cbr\u003EАтрибут тегов \u003CBGSOUND SRC\u003E, \u003CIMG DYNSRC\u003E \u003CEMBED SRC\u003E\u003Cbr\u003E \tn \t\t true\u003Cbr\u003ELOOP = INFINITE AUTOSTART= f\talse\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EВставка графики, видео, звука\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №2\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EЕсли видео не отображается, возможно, неправильно указано имя файла, или его расширение, или файл отсутствует в нужной папке. \u003Cbr\u003E\u003Cp\u003EКоличество повторений видео или звукового клипа и непрерывное повторение соответственно.\u003Cbr\u003E\u003Cp\u003EАвтоматическое воспроизведение и воспроизведение при нажатии кнопки соответственно.\u003Cbr\u003E","\u003Cp\u003E15\u003Cbr\u003EСписки\u003Cbr\u003EЕсть 2 вида списков: ненумерованные\u003Cbr\u003E(маркированные) и нумерованные.\u003Cbr\u003EНенумерованные списки:\u003Cbr\u003E\u003CUL\u003E (Unordered List) – начало списка\u003Cbr\u003E\u003C\u002FUL\u003E – конец списка.\u003Cbr\u003E\u003CLI\u003E (List Item) – элемент списка.\u003Cbr\u003EАтрибут тега \u003CUL\u003E\u003Cbr\u003E\t \tDISC\u003Cbr\u003E TYPE = \tCIRCLE\u003Cbr\u003ESQUARE\u003Cbr\u003EОпределяет вид маркера\u003Cbr\u003EПример записи и результат действия тегов.\t\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","Нумерованные списки:\u003Cbr\u003E\u003COL\u003E (Ordered List) – начало списка.\u003Cbr\u003E\u003C\u002FOL\u003E – конец списка.\u003Cbr\u003E\u003CLI\u003E (List Item) – элемент списка.\u003Cbr\u003EАтрибуты тега \u003COL\u003E\u003Cbr\u003E\t\t1\u003Cbr\u003E TYPE = \t A\u003Cbr\u003E I\u003Cbr\u003E …\u003Cbr\u003EОпределяет тип нумерации: арабскими цифрами, русскими буквами, римскими цифрами и т.д.\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E16\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №3\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","Таблицы\u003Cbr\u003E\u003CTABLE\u003E – начало таблицы.\u003Cbr\u003E\u003C\u002FTABLE\u003E – конец таблицы.\u003Cbr\u003E\u003CCAPTION\u003E – начало заголовка таблицы.\u003Cbr\u003E \u003C\u002FCAPTION\u003E – конец заголовка таблицы.\u003Cbr\u003EЗаголовок располагается прямо по центру относительно ширины таблицы.\u003Cbr\u003E\u003CTH\u003E (Table Header) – начало заголовков столбцов или строк таблицы.\u003Cbr\u003E\u003C\u002FTH\u003E – конец заголовков столбцов или строк таблицы.\u003Cbr\u003E\u003CTR\u003E (Table Row) – начало строки таблицы.\u003Cbr\u003E\u003C\u002FTR\u003E – конец строки таблицы.\u003Cbr\u003E\u003CTD\u003E – начало ячейки таблицы.\u003Cbr\u003E\u003C\u002FTD\u003E – конец ячейки таблицы.\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E17\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","Атрибуты тега \u003CTABLE\u003E\u003Cbr\u003EWIDTH=ширина таблицы в пикселах или %\u003Cbr\u003E \u003Cbr\u003EBORDER=ширина границы таблицы в пикселах или %\u003Cbr\u003EЕсли она равна нулю – границы становятся невидимы.\u003Cbr\u003ECELLSPACING= ширина промежутков между ячейками в пикселах или %\u003Cbr\u003ECELLPADDING= ширина промежутков между содержимым ячейки и её границами в пикселах или %\u003Cbr\u003EАтрибуты тега \u003CTH\u003E, \u003CTR\u003E, \u003CTD\u003E\u003Cbr\u003EТаблица может быть простой (пример на предыдущем слайде) или сложной, когда несколько строк или столбцов объединяются.\u003Cbr\u003EROWSPAN = количество объединяемых строк \u003Cbr\u003ECOLSPAN = количество объединяемых столбцов\u003Cbr\u003EBGCOLOR = цвет фона заголовка, строки, ячейки\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E18\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №4\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003EСоздание списков и таблиц\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","Бегущая строка\u003Cbr\u003E\u003CMARQUEE\u003E – начало бегущей строки.\u003Cbr\u003E\u003C\u002FMARQUEE\u003E– конец бегущей строки. \u003Cbr\u003EФрагмент текста, картинки или любые другие объекты между этими тегами будут двигаться так, как определят атрибуты.\u003Cbr\u003EАтрибуты тега \u003CMARQUEE\u003E \u003Cbr\u003EWIDTH = ширина области бегущей строки в пикселах или \u003Cbr\u003Eв % от высоты экрана\u003Cbr\u003EBGCOLOR = название цвета или его код\u003Cbr\u003EОпределяет цвет фона бегущей строки.\u003Cbr\u003E\u003Cbr\u003EDIRECTION = LEFT\t\u003Cbr\u003E\t RIGHT \t \t\t\t \u003Cbr\u003EОпределяет направление бегущей строки.\t\t \u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E19\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\t n\u003Cbr\u003ELOOP = INFINITE\u003Cbr\u003EОпределяет количество «прокруток» бегущей \u003Cbr\u003Eстроки: при первом значении атрибута – n , при \u003Cbr\u003Eвтором значении атрибута – бесконечно (по умолчанию).\t \u003Cbr\u003E \t TOP \u003Cbr\u003EALIGN = MIDDLE\u003Cbr\u003EBOTTOM\u003Cbr\u003EПозволяет разместить текст в верхней, средней или нижней части области бегущей строки.\u003Cbr\u003E\t \u003Cbr\u003E \t \t SCROLL \u003Cbr\u003E BEHAVIOR = SLADE\u003Cbr\u003E ALTERNATE\u003Cbr\u003EОпределяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.\u003Cbr\u003ESCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]\u003Cbr\u003E\t\u003Cbr\u003EHIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E20\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EБегущая строка\u003Cbr\u003E","\u003Cp\u003EФормат тега, создающего ссылку на другой \u003Cbr\u003Eдокумент:\u003Cbr\u003E\u003CA HREF= имя файла. расширение \u003Eактивный \u003Cbr\u003Eтекст или изображение\u003C\u002FA\u003E\u003Cbr\u003EЕсли файл находится в другой папке, то нужно \u003Cbr\u003Eуказывать путь к нему.\u003Cbr\u003EЕсли создается ссылка на ресурс Интернета, то нужно \u003Cbr\u003Eуказать его URL: \u003Cbr\u003E\u003CA HREF= URL-адрес \u003Eактивный текст или изображение\u003C\u002FA\u003E\u003Cbr\u003EМожно организовать сообщение по электронной почте\u003Cbr\u003E\u003CA HREF= mailto:адрес электронной почты \u003Eактивный текст или изображение\u003C\u002FA\u003E\u003Cbr\u003EАтрибуты тега \u003CBODY\u003E для задания цвета ссылок\u003Cbr\u003ELINK= цвет или код цвета\u003Cbr\u003EЗадает цвет ссылки.\u003Cbr\u003EVLINK= цвет или код цвета\u003Cbr\u003EЗадает цвет просмотренной ссылки\u003Cbr\u003EПример записи и результат действия тегов с различными значениями атрибутов.\t\u003Cbr\u003E\u003Cp\u003E21\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EALINK= цвет или код цвета\u003Cbr\u003EЗадает цвет выбранной ссылки\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №5\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E22\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание ссылок\u003Cbr\u003E\u003Cp\u003EСсылки на метки\u003Cbr\u003EМожно организовать ссылку на другую часть \u003Cbr\u003Eэтого же документа, если предварительно расставить в начале таких частей метки.\u003Cbr\u003E\u003CA HREF= #имя метки \u003Eактивный текст или изображение \u003C\u002FA\u003E \u003Cbr\u003EСоздает ссылку на метку в текущем HTML-документе:\u003Cbr\u003E\u003CA NAME= имя метки \u003Eначало текстового фрагмента \u003C\u002FA\u003E \u003Cbr\u003EМожно также создать ссылку на метку в другом документе:\u003Cbr\u003E\u003CA HREF= имя файла#имя метки \u003Eактивный текст или изображение \u003C\u002FA\u003E \u003Cbr\u003EПример записи и результат действия тегов.\t\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №6\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E23\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EКадры (frames) – это независимые части, \u003Cbr\u003Eна которые можно разбить окно браузера, и в\u003Cbr\u003Eкаждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками. \u003Cbr\u003EКоличество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:\u003Cbr\u003E\u003CFRAMESET\u003E \u003Cbr\u003EОн пределяет фреймовую структуру.\u003Cbr\u003E\u003C\u002FFRAMESET\u003E\u003Cbr\u003EЗавершает определение фреймовой структуры. \u003Cbr\u003E\u003CFRAME SRC=имя файла.расширение\u003E\u003Cbr\u003EПозволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.\u003Cbr\u003EПример записи и результат действия тегов.\u003Cbr\u003E\u003Cp\u003EИспользование тега \u003CFRAMESET\u003E исключает использование тега \u003CBODY\u003E!\t\u003Cbr\u003E\u003Cp\u003EОпределяя структуру, кадры задают сверху вниз и слева направо.\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E","\u003Cp\u003E24\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EАтрибуты тега \u003CFRAME\u003E \u003Cbr\u003ENAME = имя кадра\t\t\u003Cbr\u003EЗадает имя кадра. \u003Cbr\u003EЭто имя потом используется в качестве значения атрибута target в теге \u003CA HREF\u003E для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре. \u003Cbr\u003EПример записи ссылок с атрибутом target.\t\u003Cbr\u003ENORESIZE\u003Cbr\u003EОзначает запрет перемещения мышкой границы между кадрами.\u003Cbr\u003E no\u003Cbr\u003EFRAMEBORDER=\u003Cbr\u003E yes\u003Cbr\u003EОзначает наличие или отсутствие границы между кадрами.\u003Cbr\u003E\u003Cbr\u003E\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №7\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E25\u003Cbr\u003E\u003Cp\u003EСоздание фреймов\u003Cbr\u003E\u003Cp\u003EФреймовую структуру можно создать также с помощью тегов для создания таблиц и тега \u003Cbr\u003E\u003CIFRAME\u003E \u003Cbr\u003E\u003C\u002FIFRAME\u003E\u003Cbr\u003EЭтот тег имеет такие же атрибуты, как и тег \u003CFRAME\u003E.\u003Cbr\u003EУдобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.\u003Cbr\u003EПример записи и результат действия тегов.\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №8\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E26\u003Cbr\u003E\u003Cp\u003EМожно создавать ссылки с разных частей одного изображения, если предварительно выделить эти части (области) и определить их координаты. Такое изображение называют картой (map).\u003Cbr\u003EИзображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения. \u003Cbr\u003EТег, который позволяет определить карту: \u003Cbr\u003E\u003CMAP\u003E\u003Cbr\u003E\u003C\u002FMAP\u003E\u003Cbr\u003EМежду открывающим и закрывающим тегами \u003CMAP\u003E определяются области карты при помощи тега\u003Cbr\u003E\u003CAREA\u003E\u003Cbr\u003EДля каждой области карты должен быть создан свой элемент \u003CAREA\u003E, который должен включать атрибут, определяющий ссылку HREF= адрес ссылки\u003Cbr\u003EАтрибуты тега \u003CMAP\u003E\u003Cbr\u003EЗадаётся имя изображения-карты при помощи \u003Cbr\u003Eатрибута NAME.\u003Cbr\u003ENAME= имя\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E27\u003Cbr\u003E\u003Cp\u003EАтрибуты тега \u003CAREA\u003E\u003Cbr\u003Ealt= название области изображения-карты \u003Cbr\u003EЭто атрибут для задания текста, заменяющего изображение-карту, не является обязательным.\u003Cbr\u003ETARGET= имя фрейма \u003Cbr\u003EОпределяет имя фрейма для загрузки документа, на который делается ссылка с данной области.\u003Cbr\u003EАтрибут, определяющий форму области на карте: \u003Cbr\u003E\t rect \u003Cbr\u003E SHAPE = poly\u003Cbr\u003E\t сircle\u003Cbr\u003E\t\t point\u003Cbr\u003ECOORDS =x,y,x1,y1 \u003Cbr\u003EОписывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).\u003Cbr\u003ECOORDS =x,y,x1,y1… xn,yn\u003Cbr\u003EОписывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).\t\u003Cbr\u003ECOORDS =x,y,r\u003Cbr\u003EОписывает координаты сircle (значения атрибута – координаты центра окружности и радиус).\t\u003Cbr\u003ECOORDS =x,y\u003Cbr\u003EОписывает координаты точки point (значения атрибута – её координаты).\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EОпределение координат областей для\u003Cbr\u003Eизображения-карты. \u003Cbr\u003E","\u003Cp\u003E28\u003Cbr\u003E\u003Cp\u003EБолее простой способ получить значения координат – воспользоваться \u003Cbr\u003E\u003Cbr\u003EОн устанавливается дополнительно и совместим со всеми версиями редактора Adobe Photoshop. \u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EОпределение координат областей для\u003Cbr\u003Eизображения-карты с помощью специального фильтра. \u003Cbr\u003E\u003Cp\u003Eспециальным фильтром. \u003Cbr\u003E","\u003Cp\u003E29\u003Cbr\u003E\u003Cp\u003EУдобно использовать изображение-карту, когда страница разделена на два фрейма. \u003Cbr\u003EВ одном фрейме можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.\u003Cbr\u003EПример записи и результат действия тегов\u003Cbr\u003E\u003Cp\u003EИзображение-карта\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №9\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E2\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E","\u003Cp\u003E30\u003Cbr\u003E\u003Cp\u003EWeb-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также на сайтах, посвященных творчеству художников, дизайнеров. \u003Cbr\u003EWeb-галерея выглядит как таблица, в ячейках которой расположены миниатюры, с которых есть ссылки на эти же изображения большего формата.\u003Cbr\u003E\u003Cp\u003EСоздание Web-галереи. \u003Cbr\u003E\u003Cp\u003EWeb-галерея\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №10\u003Cbr\u003E\u003Cp\u003EМатериалы для \u003Cbr\u003Eработы\u003Cbr\u003E","\u003Cp\u003E31\u003Cbr\u003E\u003Cp\u003EДля создания интерактивных Web-страниц, обеспечивающих обратную связь, используются специальные формы.\u003Cbr\u003EФорма – это набор элементов, знакомых нам по диалоговым окнам, таких как поля ввода, поля выбора, переключатели. Форма позволяет создавать интерактивные страницы, т.е. организовывать диалог с пользователем. \u003Cbr\u003EФорма создается с помощью тега:\u003Cbr\u003E\u003CFORM\u003E\u003Cbr\u003E\u003C\u002FFORM\u003E\u003Cbr\u003EПример заполняемой формы: \u003Cbr\u003EВ пределах тега \u003CFORM\u003E для создания разных полей используют теги \u003CINPUT\u003E, \u003CSELECT\u003E и \u003CTEXTAREA\u003E с разными атрибутами, как показано в Примере.\u003Cbr\u003E\u003Cp\u003EСоздание форм\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003E1\u003Cbr\u003E\u003Cp\u003EПрактическая \u003Cbr\u003Eработа №11\u003Cbr\u003E\u003Cp\u003EПример\u003Cbr\u003E"],href:"\u002Fprezentacii-na-razlichnye-temy\u002Fosnovy-html",href_category:"\u002Fprezentacii-na-razlichnye-temy",date:1613350866,related:[{id:400905,name:"Открытые уроки",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fotkrytye-uroki",jpg:"jpg\u002F400905"},{id:389333,name:"Николай Корнильевич Пимоненко",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fnikolaj-kornilevich-pimonenko",jpg:"jpg\u002F389333"},{id:308952,name:"Ватикан",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvatikan-3",jpg:"jpg\u002F308952"},{id:466140,name:"ЗАКОНОДАТЕЛЬНАЯ ОСНОВА ИЗБИРАТЕЛЬНОЙ СИСТЕМЫ ФЕДЕРАЛЬНЫЙ ЗАКОН \"О СРЕДСТВАХ МАССОВОЙ ИНФОРМАЦИИ\"",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fzakonodatelnaya-osnova-izbiratelnoj-sistemy-federalnyj-zakon-o-sredstvax-massovoj-informacii",jpg:"jpg\u002F466140"},{id:944101,name:"Стюардесса и её обязанности",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstyuardessa-i-eyo-obyazannosti",jpg:"jpg\u002F944101"},{id:363746,name:"Биг Бен на английском",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fbig-ben-na-anglijskom",jpg:"jpg\u002F363746"},{id:344281,name:"Векторная графика",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvektornaya-grafika-2",jpg:"jpg\u002F344281"},{id:1184887,name:"презентация продукта",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentatsiya-produkta-1",jpg:"jpg\u002F1184887"},{id:294360,name:"Презентация на тему Формирование познавательной активности детей через экологическое воспитание",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-formirovanie-poznavatelnoj-aktivnosti-detej-cherez-ekologicheskoe-vospitanie",jpg:"jpg\u002F294360"},{id:303124,name:"Презентация на тему Правила по русскому языку ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-pravila-po-russkomu-yazyku",jpg:"jpg\u002F303124"},{id:279436,name:" \r\n Presentation Title ",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstroitelnyyppt",jpg:"jpg\u002F279436"},{id:392244,name:"Курочкина Наталья Николаевна, Учитель начальных классов. МКОУ«Подбельская ООШ», Москаленский район , Омская область.",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fkurochkina-natalya-nikolaevna--uchitel-nachalnyx-klassov-mkoupodbelskaya-oosh--moskalenskij-rajon---omskaya-oblast",jpg:"jpg\u002F392244"},{id:359836,name:"Предложения с обращениями 8 класс",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpredlozheniya-s-obrashheniyami-8-klass",jpg:"jpg\u002F359836"},{id:391531,name:"Стихи прекрасное Творенье!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fstixi-prekrasnoe-tvorene",jpg:"jpg\u002F391531"},{id:868129,name:"Виды рекламы по рекламодателям",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvidy-reklamy-po-reklamodatelyam",jpg:"jpg\u002F868129"},{id:957235,name:"Инклюзивное образование",href:"\u002Fprezentacii-na-razlichnye-temy\u002Finklyuzivnoe-obrazovanie-28",jpg:"jpg\u002F957235"},{id:1018104,name:"Что такое выборы?",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fchto-takoe-vybory-5",jpg:"jpg\u002F1018104"},{id:354577,name:"Пословицы и поговорки о воде",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fposlovicy-i-pogovorki-o-vode",jpg:"jpg\u002F354577"},{id:449721,name:"9. Останавливается ли Гольфстрим? Согласно апокалиптическим прогнозам из–за глобального потепления Гольфстрим может остановить",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-3495",jpg:"jpg\u002F449721"},{id:865467,name:"Русские национальные виды спорта и игры",href:"\u002Fprezentacii-na-razlichnye-temy\u002Frusskie-natsionalnye-vidy-sporta-i-igry-9",jpg:"jpg\u002F865467"},{id:421183,name:"Сервировка стола Культура поведения за столом",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fservirovka-stola-kulytura-povedeniya-za-stolom",jpg:"jpg\u002F421183"},{id:380755,name:"Повелительное наклонение the imperative mood",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fpovelitelnoe-naklonenie-the-imperative-mood",jpg:"jpg\u002F380755"},{id:422002,name:"Заместитель начальника управления Алтайского края по государственному регулированию цен и тарифов\t\t\t\t\t\t Ситникова Ольга Валерьев",href:"\u002Fprezentacii-na-razlichnye-temy\u002F-2112",jpg:"jpg\u002F422002"},{id:429432,name:"For environmental safety and public participation",href:"\u002Fprezentacii-na-razlichnye-temy\u002Ffor-environmental-safety-and-public-participation",jpg:"jpg\u002F429432"},{id:389570,name:"Субботин, это только для тебя!",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fsubbotin--eto-tolko-dlya-tebya",jpg:"jpg\u002F389570"},{id:344879,name:"Доспехи средневекового рыцаря",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fdospexi-srednevekovogo-rycarya",jpg:"jpg\u002F344879"},{id:272448,name:"Презентация на тему До свидания, начальная школа",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fprezentaciya-na-temu-do-svidaniya--nachalnaya-shkola",jpg:"jpg\u002F272448"},{id:1110097,name:"Вторая жизнь Храма городца Ижеславец",href:"\u002Fprezentacii-na-razlichnye-temy\u002Fvtoraya-zhizn-hrama-gorodtsa-izheslavets",jpg:"jpg\u002F1110097"}],navigation:{next:"\u002Fprezentacii-na-razlichnye-temy\u002Fsovremennye-podxody-k-soprovozhdeniyu-procedury-attestacii-pedagogicheskix-rabotnikov",next_name:"Современные подходы к сопровождению процедуры аттестации педагогических работников",prev:"\u002Fprezentacii-na-razlichnye-temy\u002Fsertifikat-socialnoj-bezotvetstvennosti",prev_name:"Сертификат социальной безответственности"}}}},state:{},_errors:{},serverRendered:e,config:{public:{SITE_NAME:L,SITE_HOST:"slaidy.com",SITE_LANG:M,API_BASE_URL:"https:\u002F\u002Fslaidy.com\u002Fapi\u002F",pwaManifest:{name:L,short_name:b,description:b,lang:M,start_url:"\u002F?standalone=true",display:"standalone",background_color:l,theme_color:k,icons:[{src:"\u002F_nuxt\u002Ficons\u002F64x64.d7f48e96.png",type:d,sizes:N,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F64x64.maskable.d7f48e96.png",type:d,sizes:N,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F120x120.d7f48e96.png",type:d,sizes:O,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F120x120.maskable.d7f48e96.png",type:d,sizes:O,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F144x144.d7f48e96.png",type:d,sizes:P,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F144x144.maskable.d7f48e96.png",type:d,sizes:P,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F152x152.d7f48e96.png",type:d,sizes:Q,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F152x152.maskable.d7f48e96.png",type:d,sizes:Q,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F192x192.d7f48e96.png",type:d,sizes:R,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F192x192.maskable.d7f48e96.png",type:d,sizes:R,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F384x384.d7f48e96.png",type:d,sizes:S,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F384x384.maskable.d7f48e96.png",type:d,sizes:S,purpose:g},{src:"\u002F_nuxt\u002Ficons\u002F512x512.d7f48e96.png",type:d,sizes:T,purpose:f},{src:"\u002F_nuxt\u002Ficons\u002F512x512.maskable.d7f48e96.png",type:d,sizes:T,purpose:g}]},yandexMetrika:{id:"79446466",metrikaUrl:"https:\u002F\u002Fmc.yandex.ru\u002Fmetrika\u002Ftag.js",accurateTrackBounce:e,childIframe:c,clickmap:c,defer:c,useRuntimeConfig:e,trackHash:c,trackLinks:e,type:a,webvisor:c,triggerEvent:c,consoleLog:e,partytown:c,isDev:c}},app:{baseURL:"\u002F",buildAssetsDir:"\u002F_nuxt\u002F",cdnURL:b}},pinia:{app:{meta:{h1:n,main_text:b,main_title:o,main_description:p,main_keywords:q,main_image:b},app:{logo_image:r,logo_image_width:i,logo_image_height:j,logo_text:s,image_width_full:t,image_width_min:u,recaptcha_key:v,yandex_search:w,ya_context:e,banner_1:b,banner_2:b,banner_3:b,banner_4:b,banner_5:b,banner_6:b,banner_7:b,banner_8:b,banner_9:b,banner_10:b,email:x,footer_before:y,footer:z,dark_theme:c,strategy:{image_alt_words:h,item_slide_header:A,item_images:B,item_images_tag:C,item_words_h3:c,item_words_tag:D,item_words_1:h,routing:E,item_slide_skipping:F,item_download_timeout:G,item_slider_width:a,item_show_pdf:c,item_show_contents:c,item_show_filename:e},colors:{header_text:k,header_bg:l,accent:H}},social:I,token:b}}}}(0,"",false,"image\u002Fpng",true,"any","maskable",12,28,32,"#000000","#ffffff",1,"Презентации, проекты, доклады в PowerPoint на любую тему","Презентации и проекты в PowerPoint","Презентации на различные темы для детей, школьников, родителей, студентов, учителей и преподавателей.","Презентация, презентация на тему, скачать презентацию, урок презентация, 1 2 3 4 5 6 7 8 9 10 11 класс","images\u002Fdata\u002Flogo.jpg","Slaidy.com",720,480,"6LdhFOUnAAAAAIaOUjFtosEpzs6Ny643k1QKXXvv","3190226","[e-mail]","\u003C!--LiveInternet counter--\u003E\u003Ca href=\"https:\u002F\u002Fwww.liveinternet.ru\u002Fclick\"\r\ntarget=\"_blank\"\u003E\u003Cimg id=\"licnt7D89\" width=\"88\" height=\"31\" style=\"border:0\" \r\ntitle=\"LiveInternet: показано число просмотров за 24 часа, посетителей за 24 часа и за сегодня\"\r\nsrc=\"data:image\u002Fgif;base64,R0lGODlhAQABAIAAAAAAAP\u002F\u002F\u002FyH5BAEAAAEALAAAAAABAAEAAAIBTAA7\"\r\nalt=\"LiveInternet\"\u002F\u003E\u003C\u002Fa\u003E\u003Cscript\u003E(function(d,s){d.getElementById(\"licnt7D89\").src=\r\n\"https:\u002F\u002Fcounter.yadro.ru\u002Fhit?t12.1;r\"+escape(d.referrer)+\r\n((typeof(s)==\"undefined\")?\"\":\";s\"+s.width+\"*\"+s.height+\"*\"+\r\n(s.colorDepth?s.colorDepth:s.pixelDepth))+\";u\"+escape(d.URL)+\r\n\";h\"+escape(d.title.substring(0,150))+\";\"+Math.random()})\r\n(document,screen)\u003C\u002Fscript\u003E\u003C!--\u002FLiveInternet--\u003E","\u003Ca href=\"\u002Fpage\u002Fpravoobladateliam\"\u003EДля правообладателей\u003C\u002Fa\u003E","h3a","images_before","none","h3","category","both",77,"#ff0d00","\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fes5-shims\u002F0.0.2\u002Fes5-shims.min.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cscript src=\"\u002F\u002Fyastatic.net\u002Fshare2\u002Fshare.js\"\u003E\u003C\u002Fscript\u003E\r\n\u003Cdiv class=\"ya-share2\" data-services=\"collections,gplus,vkontakte,facebook,odnoklassniki,gplus,twitter,moimir\" data-counter=\"\"\u003E\u003C\u002Fdiv\u003E","Разное","Основы HTML ","Slaidy","ru","64x64","120x120","144x144","152x152","192x192","384x384","512x512"))

n
LOOP = INFINITE
Определяет количество «прокруток» бегущей
строки: при первом значении атрибута – n , при
втором значении атрибута – бесконечно (по умолчанию).
TOP
ALIGN = MIDDLE
BOTTOM
Позволяет разместить текст в верхней, средней или нижней части области бегущей строки.
SCROLL
BEHAVIOR = SLADE
ALTERNATE
Определяет режим вывода («поведения») бегущей строки: прокрутка циклическая, выход и остановка и прыжки соответственно.
SCROLLAMOUNT = скорость перемещения текста или графики в строке [1…3000]
HIGHT= высота бегущей строки (в пикселах или в % от высоты экрана )
Пример записи и результат действия тегов с различными значениями атрибутов.
20
1
2
2
1
Бегущая строка

Формат тега, создающего ссылку на другой
документ:
активный
текст или изображение
Если файл находится в другой папке, то нужно
указывать путь к нему.
Если создается ссылка на ресурс Интернета, то нужно
указать его URL:
активный текст или изображение
Можно организовать сообщение по электронной почте
активный текст или изображение
Атрибуты тега для задания цвета ссылок
LINK= цвет или код цвета
Задает цвет ссылки.
VLINK= цвет или код цвета
Задает цвет просмотренной ссылки
Пример записи и результат действия тегов с различными значениями атрибутов.
21
1
2
2
Создание ссылок
ALINK= цвет или код цвета
Задает цвет выбранной ссылки
Практическая
работа №5
Материалы для
работы
1

22
1
2
2
1
Создание ссылок
Ссылки на метки
Можно организовать ссылку на другую часть
этого же документа, если предварительно расставить в начале таких частей метки.
активный текст или изображение
Создает ссылку на метку в текущем HTML-документе:
начало текстового фрагмента
Можно также создать ссылку на метку в другом документе:
активный текст или изображение
Пример записи и результат действия тегов.
Практическая
работа №6
Материалы для
работы

23
Создание фреймов
Кадры (frames) – это независимые части,
на которые можно разбить окно браузера, и в
каждую часть можно загружать отдельную страницу. Эти страницы могут быть связаны между собой ссылками.
Количество частей (кадров) и их размеры, выбор горизонтального или вертикального деления, т.е. кадровая (фреймовая) структура задается тегом:
Он пределяет фреймовую структуру.
Завершает определение фреймовой структуры.
Позволяет задать, какой документ (HTML-документ, текстовый, графический и т.д.) будет загружаться в отдельный кадр.
Пример записи и результат действия тегов.
Использование тега исключает использование тега !
Определяя структуру, кадры задают сверху вниз и слева направо.
1
1
2
1
2

24
1
Создание фреймов
Атрибуты тега
NAME = имя кадра
Задает имя кадра.
Это имя потом используется в качестве значения атрибута target в теге
для того, чтобы документ, на который указывает ссылка, загружался в нужном кадре.
Пример записи ссылок с атрибутом target.
NORESIZE
Означает запрет перемещения мышкой границы между кадрами.
no
FRAMEBORDER=
yes
Означает наличие или отсутствие границы между кадрами.
1
Практическая
работа №7
Материалы для
работы

25
Создание фреймов
Фреймовую структуру можно создать также с помощью тегов для создания таблиц и тега
<br>
Этот тег имеет такие же атрибуты, как и тег .
Удобство состоит в том, что не надо сначала создавать в отдельном документе фреймовую структуру, а потом задавать содержимое каждого фрейма. Любая ячейка может быть объявлена фреймом, для которого можно задать имя для обновления его содержимого по ссылкам из других ячеек.
Пример записи и результат действия тегов.
1
2
1
2
Практическая
работа №8
Материалы для
работы

26
Можно создавать ссылки с разных частей одного изображения, если предварительно выделить эти части (области) и определить их координаты. Такое изображение называют картой (map).
Изображения-карты часто используют для показа расположения помещений на планах и перехода по ссылке к описанию выбранного помещения.
Тег, который позволяет определить карту:
Между открывающим и закрывающим тегами
определяются области карты при помощи тега
Для каждой области карты должен быть создан свой элемент
, который должен включать атрибут, определяющий ссылку HREF= адрес ссылки
Атрибуты тега
Задаётся имя изображения-карты при помощи
атрибута NAME.
NAME= имя
1
Изображение-карта
1

27
Атрибуты тега
alt= название области изображения-карты
Это атрибут для задания текста, заменяющего изображение-карту, не является обязательным.
TARGET= имя фрейма
Определяет имя фрейма для загрузки документа, на который делается ссылка с данной области.
Атрибут, определяющий форму области на карте:
rect
SHAPE = poly
сircle
point
COORDS =x,y,x1,y1
Описывает координаты прямоугольника rect (значения атрибута – координаты левого верхнего угла прямоугольника и правого нижнего).
COORDS =x,y,x1,y1… xn,yn
Описывает координаты многоугольника poly (значения атрибута – пары координат всех вершин многоугольника).
COORDS =x,y,r
Описывает координаты сircle (значения атрибута – координаты центра окружности и радиус).
COORDS =x,y
Описывает координаты точки point (значения атрибута – её координаты).
Изображение-карта
Определение координат областей для
изображения-карты.

28
Более простой способ получить значения координат – воспользоваться
Он устанавливается дополнительно и совместим со всеми версиями редактора Adobe Photoshop.
Изображение-карта
Определение координат областей для
изображения-карты с помощью специального фильтра.
специальным фильтром.

29
Удобно использовать изображение-карту, когда страница разделена на два фрейма.
В одном фрейме можно поместить изображение-карту (например, справа), а в другом фрейме (например, слева) будет отображаться описание, соответствующее выделенной в данный момент области изображения.
Пример записи и результат действия тегов
Изображение-карта
Практическая
работа №9
Материалы для
работы
1
2
2
1

30
Web-галереи можно видеть на многих сайтах, особенно на сайтах музеев, а также на сайтах, посвященных творчеству художников, дизайнеров.
Web-галерея выглядит как таблица, в ячейках которой расположены миниатюры, с которых есть ссылки на эти же изображения большего формата.
Создание Web-галереи.
Web-галерея
Практическая
работа №10
Материалы для
работы