Что такое findslide.org?

FindSlide.org - это сайт презентаций, докладов, шаблонов в формате PowerPoint.


Для правообладателей

Обратная связь

Email: Нажмите что бы посмотреть 

Яндекс.Метрика

Презентация на тему Htmlязык гипертекстовой разметки документов

Содержание

HTML язык гипертекстовой разметки документовСредства создания Web-страниц и Web-сайтовЯзык гипертекстовой разметки документов (HTML)Специализированные HTML-редакторы (Homesite, Hotdog Professional, Coffee Cup HTML Editor ++)Средства визуального проектирования пакета MS OfficeРедакторы визуального проектирования (MS Front Page,
HTML – язык гипертекстовой     разметки HTML язык гипертекстовой разметки документовСредства создания   Web-страниц и Web-сайтовЯзык гипертекстовой HTML язык гипертекстовой разметки документовМетоды конструирования веб-сайтовВизуальный HTML язык гипертекстовой разметки документовВизуальный метод – МЕТОД, КОТОРЫЙ ПОЗВОЛЯЕТ ПОСТРОИТЬ ВЕБ-САЙТ Создание HTML- документа  Есть два основных способа создания HTML-документов.Первый- написание кода Создание HTML- документаДругой способ- «визуальное» составление страниц в специальном HTML-редактореСоставлять HTML-документы можно, HTML язык гипертекстовой разметки документовиз истории:В 1989 году в Женеве в Европейской HTML язык гипертекстовой разметки документов    Позже появилась необходимость в Основные понятия HTML Основные понятия HTMLТеги   Парные теги образуются двумя тегами, открывающим и Основные понятия HTML  Парные теги еще называют «контейнером», а код находящийся Основные понятия HTML  В HTML-документе мета-теги содержат информацию для браузера и Основные понятия HTML Основные понятия HTML Структура HTML-документаС помощью тегов описывается структура документа, его внешний вид и ссылки Структура HTML-документаВесь документ HTML заключается в один большой контейнер . Эта пара Структура HTML-документаЭто моя первая Web-страница Это моя первая Web- страница Наберите текст Оформление HTML- документавнешний вид веб-страницыТег определяет внешний вид веб-страницы, в то время Оформление HTML- документаПример: или Здесь задан синий цвет страницы двумя способами. Оформление HTML- документаВнешний вид веб-страницы- заголовок  При формировании веб-страниц указывается уровни Практическое заданиеОпишите оформление HTML-документ, вставив комментарии      Впервые Оформление HTML- документаФорматирование текста на языке HTMLДля создания нового абзаца используется тег Оформление HTML- документа  Форматирование текста на языке HTML Оформление HTML- документа    Форматирование текста на языке HTMLЗа начертание Оформление HTML- документаВставка изображенийДля хранения изображений используются различные форматы:gif, jpg, png, wmf, Оформление HTML- документа Практическое задание 1Вставь файл с изображением собакиВставка файла с изображением: Вставка файла Практическое задание 2Расположи разными способами изображение ангорской кошки относительно текста, содержащего сведения о ней. Практическое задание 3Размести на веб- странице изображение петуха, обрамляя это изображение рамкой различной ширины Оформление HTML- документа Оформление HTML- документа Практическая работаПостройте таблицу из двух строк и столбцов с фиксированной шириной 250 Оформление HTML- документа Оформление HTML- документа Оформление HTML- документаДля ссылки на e-mail нужно в качестве URL’a написать: mailto:адрес Оформление HTML- документа        Создание гиперссылок
Слайды презентации

Слайд 2 HTML язык гипертекстовой разметки документов
Средства создания Web-страниц

HTML язык гипертекстовой разметки документовСредства создания  Web-страниц и Web-сайтовЯзык гипертекстовой


и Web-сайтов
Язык гипертекстовой разметки документов (HTML)
Специализированные HTML-редакторы (Homesite, Hotdog

Professional, Coffee Cup HTML Editor ++)
Средства визуального проектирования пакета MS Office
Редакторы визуального проектирования
(MS Front Page, Macromedia Dreamweaver )
Одним из самых популярных визуальных HTML- редакторов является программа Microsoft FrontPage 2003. С данной программой мы познакомимся на следующих уроках информатики.


Слайд 3 HTML язык гипертекстовой разметки документов
Методы конструирования веб-сайтов
Визуальный

HTML язык гипертекстовой разметки документовМетоды конструирования веб-сайтовВизуальный





Ручной или программируемый


Слайд 4 HTML язык гипертекстовой разметки документов
Визуальный метод – МЕТОД, КОТОРЫЙ

HTML язык гипертекстовой разметки документовВизуальный метод – МЕТОД, КОТОРЫЙ ПОЗВОЛЯЕТ ПОСТРОИТЬ

ПОЗВОЛЯЕТ ПОСТРОИТЬ ВЕБ-САЙТ С ВЫСОКОЙ СТЕПЕНЬЮ АВТОМАТИЗАЦИИ.
( Редакторы: Microsoft

FrontPage, Dream Weawer (Macromedia), Namo WebEditor? Adobe Golive и др.)

Программируемый метод – метод создания сайта на языке HTML.


Слайд 5 Создание HTML- документа
Есть два основных способа

Создание HTML- документа Есть два основных способа создания HTML-документов.Первый- написание кода

создания HTML-документов.
Первый- написание кода HTML вручную. Для этого нужно

знать все основные теги HTML, хорошо представлять их действие и представлять, как будет выглядеть итоговый результат после того или иного изменения кода.
Достоинства: позволяет контролировать все тонкости HTML-кода, писать код HTML можно в любом текстовом редакторе, например в Блокноте Windows, хотя и существуют различные программы, облегчающие «ручное» кодирование HTML.
Недостатки:
Процесс трудоемкий и требует постоянно держать в памяти массу информации.

Слайд 6 Создание HTML- документа
Другой способ- «визуальное» составление страниц в

Создание HTML- документаДругой способ- «визуальное» составление страниц в специальном HTML-редактореСоставлять HTML-документы

специальном HTML-редакторе
Составлять HTML-документы можно, просто вставляя на страницу нужные

элементы оформления, ссылки на другие документы, изображения, тексты и размещая их так, как необходимо. Такой способ работы называют WYSISWYG (What You See is What You Get-что вы видите, то и получаете)
Достоинства: методика проста в освоении, позволяет быстро создавать достаточно сложные гипертекстовые документы и, кроме того, наглядна.
Недостатки:
HTML- редактор не позволяет реализовать все тонкости языка HTML. Поэтому визуальные HTML-редакторы предусматривают и работу непосредственно с кодом страницы.


Слайд 7 HTML язык гипертекстовой разметки документов
из истории:
В 1989 году в

HTML язык гипертекстовой разметки документовиз истории:В 1989 году в Женеве в

Женеве в Европейской лаборатории физики элементарных частиц Тимам Бернерсом-Ли

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


Слайд 8 HTML язык гипертекстовой разметки документов

Позже

HTML язык гипертекстовой разметки документов  Позже появилась необходимость в создании

появилась необходимость в создании такой системы, которая могла бы

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



Слайд 9 Основные понятия HTML

Основные понятия HTML

Теги
Основой языка HTML являются теги, специальные команды, заключенные в угловые скобки, например ,
, . Между ними находятся коды, которые распознает браузер.
Теги бывают одиночными и парными.
Одиночные теги, как и следует из названия, используются поодиночке, обозначая самостоятельный элемент оформления. Например, тег
означает разрыв строки, а с помощью тега в HTML- документ можно вставить изображение. Теги можно записывать как прописными буквами, так и строчными
(, <title>)<br><br><br><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide10"> <a href="/img/tmb/14/1325513/8c4f718dd9d9e65e6ee333307b648350-720x.jpg" target="_blank">Слайд 10</a> Основные понятия HTML<br>Теги<br> Парные теги образуются </h3> <div class="image"> <a href="/img/tmb/14/1325513/8c4f718dd9d9e65e6ee333307b648350-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные понятия HTMLТеги Парные теги образуются двумя тегами, открывающим и закрывающим, которые отличаются друг от друга только значком «/» перед закрывающим тегом. Парные теги влияют на оформление всего кода HTML, находящегося между ними. "><img src="/img/tmb/14/1325513/8c4f718dd9d9e65e6ee333307b648350-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Основные понятия HTMLТеги Парные теги образуются двумя тегами, открывающим и"></a> </div> <div class="text"> <h4>двумя тегами, открывающим и закрывающим, которые отличаются друг от</h4> друга только значком «/» перед закрывающим тегом. Парные теги влияют на оформление всего кода HTML, находящегося между ними. <br> <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide11"> <a href="/img/tmb/14/1325513/4461446b40797a157097abf96b708bff-720x.jpg" target="_blank">Слайд 11</a> Основные понятия HTML<br> Парные теги еще называют </h3> <div class="image"> <a href="/img/tmb/14/1325513/4461446b40797a157097abf96b708bff-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные понятия HTML Парные теги еще называют «контейнером», а код находящийся между ними «содержимом контейнера». Например, Этот текст будет полужирным. Весь текст, помещенный в контейнер оформляется полужирным шрифтом и в Web– браузере будет выглядеть примерно так: «Этот текст будет полужирным».Контейнеры могут вкладываться друг в друга, действуя вместе на содержимое вложенного контейнера. Например, Этот текст будет полужирным А этот текст еще и курсивным. Как будет выглядеть текст в Web– браузере? "><img src="/img/tmb/14/1325513/4461446b40797a157097abf96b708bff-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Основные понятия HTML Парные теги еще называют «контейнером», а код находящийся"></a> </div> <div class="text"> <h4>«контейнером», а код находящийся между ними «содержимом контейнера». Например,</h4> <B> Этот текст будет полужирным</B>. Весь текст, помещенный в контейнер <B> </B> оформляется полужирным шрифтом и в Web– браузере будет выглядеть примерно так: «Этот текст будет полужирным».Контейнеры могут вкладываться друг в друга, действуя вместе на содержимое вложенного контейнера. Например, <B>Этот текст будет полужирным <I> А этот текст еще и курсивным</I></B>. Как будет выглядеть текст в Web– браузере? <br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide12"> <a href="/img/tmb/14/1325513/8fd5c3a3688a0f51684078cde958e725-720x.jpg" target="_blank">Слайд 12</a> Основные понятия HTML<br> В HTML-документе мета-теги содержат </h3> <div class="image"> <a href="/img/tmb/14/1325513/8fd5c3a3688a0f51684078cde958e725-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные понятия HTML В HTML-документе мета-теги содержат информацию для браузера и поисковых систем и всегда размещаются между тегами . Большинство мета-тегов являются необязательными."><img src="/img/tmb/14/1325513/8fd5c3a3688a0f51684078cde958e725-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Основные понятия HTML В HTML-документе мета-теги содержат информацию для браузера и"></a> </div> <div class="text"> <h4>информацию для браузера и поисковых систем и всегда размещаются</h4> между тегами <head> </head>. Большинство мета-тегов являются необязательными.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide13"> <a href="/img/tmb/14/1325513/164f58d12820dc8bed4f9087971cc5a2-720x.jpg" target="_blank">Слайд 13</a> Основные понятия HTML<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/164f58d12820dc8bed4f9087971cc5a2-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные понятия HTML Теги Примеры самых полезных мета тегов: - при указании этого мета-тега браузер будет правильно отображать текст страницы: .. Этот мета- тег указывает имя автора сайта. . При использовании этого мета-тега определяется дата создания сайта. "><img src="/img/tmb/14/1325513/164f58d12820dc8bed4f9087971cc5a2-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Основные понятия HTML Теги"></a> </div> <div class="text"> <h4> </h4> Теги <br>Примеры самых полезных мета тегов:<br><meta http-eguiv=“conten-type”content=“text/html;charset=кодировка”> - при указании этого мета-тега браузер будет правильно отображать текст страницы: <meta http-eguiv=“conten-type”content=“text/html;charset=Windows-1251>.<br><meta name=“author” content=“имя автора”>. Этот мета- тег указывает имя автора сайта. <meta name=“author” content=“Алесь Симончик”> <br><meta name=“data” content=“месяц, число, год и время через пробел”>. При использовании этого мета-тега определяется дата создания сайта. <meta name=“data” content=“October 27 1998 16:01 Am”><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide14"> <a href="/img/tmb/14/1325513/162c1746ec60fd8d950c35d2e9f55e2c-720x.jpg" target="_blank">Слайд 14</a> Основные понятия HTML<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/162c1746ec60fd8d950c35d2e9f55e2c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные понятия HTML АтрибутыДополнительные параметры действия тегов задаются атрибутами. Атрибуты записываются вместе с названием тега в угловых скобках. Например, так:.Атрибут SRC указывает адрес изображения, которое будет вставлено в документ Html на место тега IMG.Правило записи атрибутов в теге следующее:"><img src="/img/tmb/14/1325513/162c1746ec60fd8d950c35d2e9f55e2c-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Основные понятия HTML АтрибутыДополнительные параметры"></a> </div> <div class="text"> <h4> Атрибуты<br>Дополнительные параметры</h4> действия тегов задаются атрибутами. Атрибуты записываются вместе с названием тега в угловых скобках. Например, так:<br><IMG SRC=«с:\мои документы\image.jpg»>.Атрибут SRC указывает адрес изображения, которое будет вставлено в документ Html на место тега IMG.<br>Правило записи атрибутов в теге следующее:<br><тег атрибут1=значение атрибут2=значение…><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide15"> <a href="/img/tmb/14/1325513/6e691bfe9408cc745b0c1c3accaec6c9-720x.jpg" target="_blank">Слайд 15</a> Структура HTML-документа<br>С помощью тегов описывается структура документа, его </h3> <div class="image"> <a href="/img/tmb/14/1325513/6e691bfe9408cc745b0c1c3accaec6c9-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Структура HTML-документаС помощью тегов описывается структура документа, его внешний вид и ссылки на другие документы. В языке HTML есть несколько основных тегов, которые отвечают за его структуру. Это теги , , . "><img src="/img/tmb/14/1325513/6e691bfe9408cc745b0c1c3accaec6c9-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Структура HTML-документаС помощью тегов описывается структура документа, его внешний вид и"></a> </div> <div class="text"> <h4>внешний вид и ссылки на другие документы. В языке</h4> HTML есть несколько основных тегов, которые отвечают за его структуру. Это теги <html>, <head>, <body>. <br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide16"> <a href="/img/tmb/14/1325513/06681be63ad02d18224e3d9a7862dd19-720x.jpg" target="_blank">Слайд 16</a> Структура HTML-документа<br>Весь документ HTML заключается в один большой </h3> <div class="image"> <a href="/img/tmb/14/1325513/06681be63ad02d18224e3d9a7862dd19-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Структура HTML-документаВесь документ HTML заключается в один большой контейнер . Эта пара тегов сообщает Web- браузеру о том, что документ написан на языке HTML. Контейнер содержит еще два контейнера. Первый , называется заголовком, и в нем содержится разнообразная информация о содержимом всего документа: язык, на котором написаны тексты, версия языка HTML, на которую ориентировалось создатели документа, основные ключевые слова для поисковых «ботов», общий заголовок HTML- документа и прочее. Второй контейнер включает в себя все основное содержимое документа, его «тело».В HTML-документе можно разместить комментарии, которые браузером не отображаются:< !Комментарии>. "><img src="/img/tmb/14/1325513/06681be63ad02d18224e3d9a7862dd19-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Структура HTML-документаВесь документ HTML заключается в один большой контейнер . Эта"></a> </div> <div class="text"> <h4>контейнер . Эта пара тегов сообщает Web- браузеру</h4> о том, что документ написан на языке HTML. Контейнер содержит еще два контейнера. Первый <head> </head>, называется заголовком, и в нем содержится разнообразная информация о содержимом всего документа: язык, на котором написаны тексты, версия языка HTML, на которую ориентировалось создатели документа, основные ключевые слова для поисковых «ботов», общий заголовок HTML- документа и прочее. Второй контейнер <body> </body> включает в себя все основное содержимое документа, его «тело».<br>В HTML-документе можно разместить комментарии, которые браузером не отображаются:< !Комментарии>.<br><br> <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide17"> <a href="/img/tmb/14/1325513/4d393f78e779ac3dfc11378f1750fd1f-720x.jpg" target="_blank">Слайд 17</a> Структура HTML-документа<br><br><br><br><br>Это моя первая </h3> <div class="image"> <a href="/img/tmb/14/1325513/4d393f78e779ac3dfc11378f1750fd1f-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Структура HTML-документаЭто моя первая Web-страница Это моя первая Web- страница Наберите текст в Блокноте и просмотрите в Web- браузере. "><img src="/img/tmb/14/1325513/4d393f78e779ac3dfc11378f1750fd1f-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Структура HTML-документаЭто моя первая Web-страница Это моя первая Web- страница Наберите"></a> </div> <div class="text"> <h4>Web-страница<br><br><br> Это моя первая Web- <br>страница</h4> </span></p><br></body><br></html><br>Наберите текст в Блокноте и просмотрите в Web- браузере. <br><br><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide18"> <a href="/img/tmb/14/1325513/a7cb3db2a5b52af7d2cb8332df4b26f4-720x.jpg" target="_blank">Слайд 18</a> Оформление HTML- документа<br>внешний вид веб-страницы<br>Тег определяет внешний </h3> <div class="image"> <a href="/img/tmb/14/1325513/a7cb3db2a5b52af7d2cb8332df4b26f4-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документавнешний вид веб-страницыТег определяет внешний вид веб-страницы, в то время как отдельные ее элементы, например заголовки, таблицы могут иметь свое особенное оформлениеВыбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайтаЦвет страницы задается атрибутом bgcolor, а цвет текста- text.Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом. "><img src="/img/tmb/14/1325513/a7cb3db2a5b52af7d2cb8332df4b26f4-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документавнешний вид веб-страницыТег определяет внешний вид веб-страницы, в то"></a> </div> <div class="text"> <h4>вид веб-страницы, в то время как отдельные ее элементы,</h4> например заголовки, таблицы могут иметь свое особенное оформление<br>Выбор цвета страницы, фонового рисунка и цвета текста на ней является весьма важным, так как от этого зависит визуальное восприятие всего сайта<br>Цвет страницы задается атрибутом bgcolor, а цвет текста- text.Значением атрибутов является цвет, который задается своим названием на английском языке или его шестнадцатеричным кодом. <br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide19"> <a href="/img/tmb/14/1325513/ab2adacd0046641459fdc7cd4c38b68a-720x.jpg" target="_blank">Слайд 19</a> Оформление HTML- документа<br>Пример:<br> или <br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/ab2adacd0046641459fdc7cd4c38b68a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документаПример: или Здесь задан синий цвет страницы двумя способами."><img src="/img/tmb/14/1325513/ab2adacd0046641459fdc7cd4c38b68a-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документаПример: или Здесь задан синий цвет страницы двумя способами."></a> </div> <div class="text"> <h4>шестнадцатеричный цвет фона><br>Здесь задан синий цвет страницы двумя способами.<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide20"> <a href="/img/tmb/14/1325513/93ffae26d3c9632214ad6cdedf3c1cb3-720x.jpg" target="_blank">Слайд 20</a> Оформление HTML- документа<br>Внешний вид веб-страницы- заголовок<br> При </h3> <div class="image"> <a href="/img/tmb/14/1325513/93ffae26d3c9632214ad6cdedf3c1cb3-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документаВнешний вид веб-страницы- заголовок При формировании веб-страниц указывается уровни заголовков, которые обозначаются h1,h2,…h6. Для описания уровней используются теги ,,…. Заголовок уровня 1 самый крупный, а уровня 6- самый маленький. Для выравнивания текста на странице обычно указывается одно из трех значений атрибута align: align=center-выравнивание заголовка по центру align=left-выравнивание заголовка по левому краю align=right -выравнивание заголовка по правому краю "><img src="/img/tmb/14/1325513/93ffae26d3c9632214ad6cdedf3c1cb3-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документаВнешний вид веб-страницы- заголовок При формировании веб-страниц указывается уровни"></a> </div> <div class="text"> <h4>формировании веб-страниц указывается уровни заголовков, которые обозначаются h1,h2,…h6. Для</h4> описания уровней используются теги <h1>,<h2>,…<h6>. Заголовок уровня 1 самый крупный, а уровня 6- самый маленький. Для выравнивания текста на странице обычно указывается одно из трех значений атрибута align: align=center-выравнивание заголовка по центру <br> align=left-выравнивание заголовка по левому краю <br> align=right -выравнивание заголовка по правому краю <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide21"> <a href="/img/tmb/14/1325513/07b5be6e37ed173e3063411b6c5fc446-720x.jpg" target="_blank">Слайд 21</a> Практическое задание<br>Опишите оформление HTML-документ, вставив комментарии <br><br><br><br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/07b5be6e37ed173e3063411b6c5fc446-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Практическое заданиеОпишите оформление HTML-документ, вставив комментарии Впервые создаем HTML-документPS:в сети Интернет существуют сайты, содержащие готовые фоновые рисунки (обои), например сайт «Азбука дизайнера»- http:www.dsgn.al.ru/fons.htm .Эти фоновые рисунки можно использовать для создания веб-страниц. Также в качестве фонового рисунка можно использовать графический файл- , где *.*- имя графического файла с расширением *.jpg, *. gif, *.png."><img src="/img/tmb/14/1325513/07b5be6e37ed173e3063411b6c5fc446-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Практическое заданиеОпишите оформление HTML-документ, вставив комментарии Впервые создаем"></a> </div> <div class="text"> <h4> Впервые создаем HTML-документ<br><br><br><br></h4> align=center><br><h2 align=left><br><h3 align=right><br></body><br></html><br>PS:в сети Интернет существуют сайты, содержащие готовые фоновые рисунки (обои), например сайт «Азбука дизайнера»- http:www.dsgn.al.ru/fons.htm .Эти фоновые рисунки можно использовать для создания веб-страниц. Также в качестве фонового рисунка можно использовать графический файл- <body backgroud=“*.*”>, где *.*- имя графического файла с расширением *.jpg, *. gif, *.png.<br><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide22"> <a href="/img/tmb/14/1325513/e25f260a312ce3edc52b58c0e972a08c-720x.jpg" target="_blank">Слайд 22</a> Оформление HTML- документа<br>Форматирование текста на языке HTML<br>Для создания </h3> <div class="image"> <a href="/img/tmb/14/1325513/e25f260a312ce3edc52b58c0e972a08c-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документаФорматирование текста на языке HTMLДля создания нового абзаца используется тег а для перехода на новую строчку без создания абзаца- тег .Эти теги закрывать не обязательно, если в них не используются атрибуты. Выравнивание абзацев происходит аналогично выравниванию заголовков при помощи атрибута align. Для определения типа, размера и цвета символа используется тег . Свойства символа определяются с помощью атрибутов; faсe=«название шрифта»сolor=«цвет символа»size=размер шрифта ( по умолчанию размер равен 3)Поместив текст между тегами , где n-цифровое значение, можно придать ему нужный размер(1-6)."><img src="/img/tmb/14/1325513/e25f260a312ce3edc52b58c0e972a08c-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документаФорматирование текста на языке HTMLДля создания нового абзаца используется"></a> </div> <div class="text"> <h4>нового абзаца используется тег а для перехода на</h4> новую строчку без создания абзаца- тег <br>.<br>Эти теги закрывать не обязательно, если в них не используются атрибуты. Выравнивание абзацев происходит аналогично выравниванию заголовков при помощи атрибута align. Для определения типа, размера и цвета символа используется тег <font> </font>. Свойства символа определяются с помощью атрибутов; <br>faсe=«название шрифта»<br>сolor=«цвет символа»<br>size=размер шрифта ( по умолчанию размер равен 3)<br>Поместив текст между тегами <font size=n>, где n-цифровое значение, можно придать ему нужный размер(1-6).<br><br><br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide23"> <a href="/img/tmb/14/1325513/5285150907b04947488a6c692f5b59f1-720x.jpg" target="_blank">Слайд 23</a> Оформление HTML- документа<br> Форматирование текста на языке </h3> <div class="image"> <a href="/img/tmb/14/1325513/5285150907b04947488a6c692f5b59f1-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Форматирование текста на языке HTML Выведем текст с использованием тега Шрифт Arial красного цвета вдруг стал большим < font size=-3>Внезапно текст уменьшился Текст превратился а Tahoma зеленого цвета Попробуйте объяснить значение тегов: , < font size=-3>."><img src="/img/tmb/14/1325513/5285150907b04947488a6c692f5b59f1-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа Форматирование текста на языке HTML Выведем текст"></a> </div> <div class="text"> <h4>HTML<br> Выведем текст с использованием тега</h4> <font><br><p><font face=“Arial” color=red>Шрифт Arial красного цвета <br><font size=+3>вдруг стал большим </font><br><p>< font size=-3>Внезапно текст уменьшился </font><br><p><font fase=“Tahoma” color=green> Текст превратился а Tahoma зеленого цвета </font><br><br>Попробуйте объяснить значение тегов: <font face=“Arial” color=red>,<br> < font size=-3>.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide24"> <a href="/img/tmb/14/1325513/ec2ab076649ec833d2698c50df68313e-720x.jpg" target="_blank">Слайд 24</a> Оформление HTML- документа<br> Форматирование текста </h3> <div class="image"> <a href="/img/tmb/14/1325513/ec2ab076649ec833d2698c50df68313e-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Форматирование текста на языке HTMLЗа начертание текста отвечает целая группа тегов, значение которых приведены в таблице"><img src="/img/tmb/14/1325513/ec2ab076649ec833d2698c50df68313e-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа Форматирование текста на языке HTMLЗа начертание текста"></a> </div> <div class="text"> <h4>на языке HTML<br>За начертание текста отвечает целая группа тегов,</h4> значение которых приведены в таблице<br><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide25"> <a href="/img/tmb/14/1325513/b3689fbd359ced6e9ebeed09372c55fc-720x.jpg" target="_blank">Слайд 25</a> Оформление HTML- документа<br>Вставка изображений<br>Для хранения изображений используются различные </h3> <div class="image"> <a href="/img/tmb/14/1325513/b3689fbd359ced6e9ebeed09372c55fc-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документаВставка изображенийДля хранения изображений используются различные форматы:gif, jpg, png, wmf, bmp и др. Наиболее предпочтительны для изображения графические форматы gif, jpeg, png, которые позволяют ускорить процесс загрузки.Для вставки изображения используется тег следующей конструкции:< img src=«Имя файла» border=«Ширина рамки» align=«Выравнивание»> width=«Ширина» height=«Высота» hspace=«Отступ по горизонтали» vspase=«Отступ по вертикали» title=«Подсказка»> "><img src="/img/tmb/14/1325513/b3689fbd359ced6e9ebeed09372c55fc-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документаВставка изображенийДля хранения изображений используются различные форматы:gif, jpg, png,"></a> </div> <div class="text"> <h4>форматы:gif, jpg, png, wmf, bmp и др. Наиболее предпочтительны</h4> для изображения графические форматы gif, jpeg, png, которые позволяют ускорить процесс загрузки.<br><br><br>Для вставки изображения используется тег <img> следующей конструкции:<br>< img src=«Имя файла» border=«Ширина рамки» align=«Выравнивание»> width=«Ширина» height=«Высота» hspace=«Отступ по горизонтали» vspase=«Отступ по вертикали» title=«Подсказка»> <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide26"> <a href="/img/tmb/14/1325513/4f35ebb1e5b0a991121aa14b94b302c2-720x.jpg" target="_blank">Слайд 26</a> Оформление HTML- документа<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/4f35ebb1e5b0a991121aa14b94b302c2-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Назначение основных атрибутов тега Align Выравнивание текста по: top — верхнему краю изображения; middle — средней части изображения; bottom — нижнему краю изображения; left — показывает изображение слева; right — показывает изображение в правой части окна.Height Указывает высоту изображения в пикселах или процентах Width Указывает ширину изображения в пикселах или процентахborderПрисваивает значение ширины рамки в пикселах вокруг изображенияVspace Расширяет свободное пространство в пикселах во­круг изображения по вертикалиHspace Расширяет свободное пространство в пикселах вокруг изображения по горизонтали Title Отображает подсказку по вставленному изображению при установке указателя мыши"><img src="/img/tmb/14/1325513/4f35ebb1e5b0a991121aa14b94b302c2-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа"></a> </div> <div class="text"> <h4><br> </h4> Назначение основных атрибутов тега <img><br>Align Выравнивание текста по:<br> top — верхнему краю изображения;<br> middle — средней части изображения;<br> bottom — нижнему краю изображения;<br> left — показывает изображение слева;<br> right — показывает изображение в правой части окна.<br>Height Указывает высоту изображения в пикселах или<br> процентах <br>Width Указывает ширину изображения в пикселах или<br> процентахborderПрисваивает значение ширины рамки в пикселах вокруг<br> изображения<br>Vspace Расширяет свободное пространство в пикселах во­круг изображения по <br> вертикали<br>Hspace Расширяет свободное пространство в пикселах вокруг изображения по<br> горизонтали <br>Title Отображает подсказку по вставленному изображению при установке указателя мыши<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide27"> <a href="/img/tmb/14/1325513/e22426a5f36894996f45cbd5d80d6ddd-720x.jpg" target="_blank">Слайд 27</a> Практическое задание 1<br>Вставь файл с изображением собаки<br>Вставка файла </h3> <div class="image"> <a href="/img/tmb/14/1325513/e22426a5f36894996f45cbd5d80d6ddd-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Практическое задание 1Вставь файл с изображением собакиВставка файла с изображением: Вставка файла с указанием ширины и высоты изображения:"><img src="/img/tmb/14/1325513/e22426a5f36894996f45cbd5d80d6ddd-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Практическое задание 1Вставь файл с изображением собакиВставка файла с изображением: Вставка"></a> </div> <div class="text"> <h4>с изображением:<br> <br>Вставка файла с указанием ширины и</h4> высоты изображения:<br><img src="/pes.gif" width="100" height="93"><br> </div> <hr> </div> <div class="descrip"> <h3 id="slide28"> <a href="/img/tmb/14/1325513/591a44bc9d99f96fdbfd8d7f2c06f12a-720x.jpg" target="_blank">Слайд 28</a> Практическое задание 2<br>Расположи разными способами изображение ангорской кошки </h3> <div class="image"> <a href="/img/tmb/14/1325513/591a44bc9d99f96fdbfd8d7f2c06f12a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Практическое задание 2Расположи разными способами изображение ангорской кошки относительно текста, содержащего сведения о ней."><img src="/img/tmb/14/1325513/591a44bc9d99f96fdbfd8d7f2c06f12a-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Практическое задание 2Расположи разными способами изображение ангорской кошки относительно текста, содержащего сведения о ней."></a> </div> <div class="text"> <h4>относительно текста, содержащего сведения о ней.<br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide29"> <a href="/img/tmb/14/1325513/2bff13e17b356f2ea1203bc7fcd37319-720x.jpg" target="_blank">Слайд 29</a> Практическое задание 3<br>Размести на веб- странице изображение петуха, </h3> <div class="image"> <a href="/img/tmb/14/1325513/2bff13e17b356f2ea1203bc7fcd37319-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Практическое задание 3Размести на веб- странице изображение петуха, обрамляя это изображение рамкой различной ширины"><img src="/img/tmb/14/1325513/2bff13e17b356f2ea1203bc7fcd37319-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Практическое задание 3Размести на веб- странице изображение петуха, обрамляя это изображение рамкой различной ширины"></a> </div> <div class="text"> <h4>обрамляя это изображение рамкой различной ширины<br><br></h4> </div> <hr> </div> <div class="descrip"> <h3 id="slide30"> <a href="/img/tmb/14/1325513/ae533e004a8c4c70a24b559ce5ad5e39-720x.jpg" target="_blank">Слайд 30</a> Оформление HTML- документа<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/ae533e004a8c4c70a24b559ce5ad5e39-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Создание таблиц При построении таблицы используются следующие основные теги:а) основной элемент описания таблицы — тег < table > < /table >;б) определение строк в таблице — тег ;в) описание ячеек в таблице — теги .Тег использует целый ряд дополнительных атрибутов: align, width, border, bordercolor, cellspacing и др. В дальнейшем рассмотрим назначения еще незнакомых вам атрибутов."><img src="/img/tmb/14/1325513/ae533e004a8c4c70a24b559ce5ad5e39-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа Создание таблиц При"></a> </div> <div class="text"> <h4> Создание таблиц <br>При</h4> построении таблицы используются следующие основные теги:<br>а) основной элемент описания таблицы — тег < table > < /table >;<br>б) определение строк в таблице — тег <tr>;<br>в) описание ячеек в таблице — теги <td>.<br>Тег <tаblе> </table> использует целый ряд дополнительных атрибутов: align, width, border, bordercolor, cellspacing и др. В дальнейшем рассмотрим назначения еще незнакомых вам атрибутов.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide31"> <a href="/img/tmb/14/1325513/4c3987d9b468ad19574c8118c0d7858a-720x.jpg" target="_blank">Слайд 31</a> Оформление HTML- документа<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/4c3987d9b468ad19574c8118c0d7858a-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Создание таблицШирина таблицы может быть задана в пикселах или в процентном отношении к ширине страницы, например, width = 450 или width = 40%.При построении таблицы создается «впечатление» их выпуклости с помощью двух рамок— фронтальной и боковой (рис.Ширину боковой рамки в пикселах определяет атрибут border = ширина боковой рамки, а ширину фронтальной рамки определяет атрибут cellspacing = ширина фронтальной рамки, bordercolor= цвет границы таблицы.Боковая рамка Фронтальная рамка"><img src="/img/tmb/14/1325513/4c3987d9b468ad19574c8118c0d7858a-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа Создание таблицШирина таблицы"></a> </div> <div class="text"> <h4> Создание таблиц<br>Ширина таблицы может</h4> быть задана в пикселах или в процентном отношении к ширине страницы, например, width = 450 или width = 40%.<br>При построении таблицы создается «впечатление» их выпуклости с помощью двух рамок— фронтальной и боковой (рис.<br><br><br><br><br><br><br><br>Ширину боковой рамки в пикселах определяет атрибут border = ширина боковой рамки, а ширину фронтальной рамки определяет атрибут cellspacing = ширина фронтальной рамки, bordercolor= цвет границы таблицы.<br><p>Боковая рамка <br><p>Фронтальная рамка<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide32"> <a href="/img/tmb/14/1325513/74d9aa079d9f74af12e692ac27b963ba-720x.jpg" target="_blank">Слайд 32</a> Практическая работа<br>Постройте таблицу из двух строк и столбцов </h3> <div class="image"> <a href="/img/tmb/14/1325513/74d9aa079d9f74af12e692ac27b963ba-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Практическая работаПостройте таблицу из двух строк и столбцов с фиксированной шириной 250 пикселей, шириной боковой рамки 2 пикселя и ячейками светло-зеленого цвета. Если указать атрибуты border=1, cellspacing=0 и bordercolor=black, то эффект выпуклости границы рамки практически исчезнет и получим обычные границы таблицы черного цвета."><img src="/img/tmb/14/1325513/74d9aa079d9f74af12e692ac27b963ba-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Практическая работаПостройте таблицу из двух строк и столбцов с фиксированной шириной"></a> </div> <div class="text"> <h4>с фиксированной шириной 250 пикселей, шириной боковой рамки 2</h4> пикселя и ячейками светло-зеленого цвета. <br><p>Если указать атрибуты border=1, cellspacing=0 и bordercolor=black, то эффект выпуклости границы рамки практически исчезнет и получим обычные границы таблицы черного цвета.<br> </div> <hr> </div> <div class="descrip"> <h3 id="slide33"> <a href="/img/tmb/14/1325513/b592d5fb471910f5de42f86904db726b-720x.jpg" target="_blank">Слайд 33</a> Оформление HTML- документа<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/b592d5fb471910f5de42f86904db726b-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Создание таблицЯчейки в таблице могут быть объединены с помощью атрибутов rowspan = n, где n (n > 1) — количество строк, выделяемых под ячейку или colspan = k, где k (k > 1) — количество столбцов, выделенных под ячейку.При построении таблиц на языке HTML допускается вложение в ячейки других таблиц "><img src="/img/tmb/14/1325513/b592d5fb471910f5de42f86904db726b-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа"></a> </div> <div class="text"> <h4> </h4> Создание таблиц<br>Ячейки в таблице могут быть объединены с помощью атрибутов rowspan = n, где n (n > 1) — количество строк, выделяемых под ячейку или colspan = k, где k (k > 1) — количество столбцов, выделенных под ячейку.<br><br><p>При построении таблиц на языке HTML допускается вложение в ячейки других таблиц <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide34"> <a href="/img/tmb/14/1325513/861eb9a662b68a3aaa8d83f8801a6cc0-720x.jpg" target="_blank">Слайд 34</a> Оформление HTML- документа<br> </h3> <div class="image"> <a href="/img/tmb/14/1325513/861eb9a662b68a3aaa8d83f8801a6cc0-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документа Создание гиперссылок За организацию ссылок на языке HTML отвечает тег , который чаще всего использует следующий шаблон: Произвольный текст текст для щелчка по нем мышью < /а >. Атрибут href может указывать на URL - адрес любого ресурса Интернет, который может быть абсолютным, то есть иметь полный адрес странички например, http://academy.edu.by/index.htm) или относительным, например, ../index.htm). Гиперссылкой может быть любое изображение, поддерживаемое браузером. Для этого между тегами ... вместо текста ссылки нужно вставить графический элемент, например: "><img src="/img/tmb/14/1325513/861eb9a662b68a3aaa8d83f8801a6cc0-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документа Создание гиперссылок"></a> </div> <div class="text"> <h4> Создание гиперссылок<br></h4> За организацию ссылок на языке HTML отвечает тег <a> </a>, который чаще всего использует следующий шаблон:<br><br> Произвольный текст <a href = "Адрес ссылки"> текст для щелчка по нем мышью < /а >. <br> Атрибут href может указывать на URL - адрес любого ресурса Интернет, который может быть абсолютным, то есть иметь полный адрес странички например, <br> http://academy.edu.by/index.htm) или относительным, например, ../index.htm). <br> Гиперссылкой может быть любое изображение, поддерживаемое браузером. Для этого между тегами <br> <a href >...</a > вместо текста ссылки нужно вставить графический элемент, например: <a href="/d1.htm"> <img src="/face.gif"></a> <br> </div> <hr> </div> <div class="descrip"> <h3 id="slide35"> <a href="/img/tmb/14/1325513/8c8872fb46d266ad1531164e62bdf176-720x.jpg" target="_blank">Слайд 35</a> Оформление HTML- документа<br>Для ссылки на e-mail нужно в </h3> <div class="image"> <a href="/img/tmb/14/1325513/8c8872fb46d266ad1531164e62bdf176-720x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление HTML- документаДля ссылки на e-mail нужно в качестве URL’a написать: mailto:адрес электронной почты, например: Мой адресОрганизация внутренних ссылок, позволяющая осуществлять переход внутри текущей страницы, выполняется в два этапа:а) сначала в нужных местах веб-страницы устанавливается закладка < /а >;б) на втором этапе определяется ссылка на метку по следующему шаблону: Текст подсказки < a href = "#Закладка"> текст для щелчка мышью."><img src="/img/tmb/14/1325513/8c8872fb46d266ad1531164e62bdf176-720x.jpg" title="Htmlязык гипертекстовой разметки документов" alt="Оформление HTML- документаДля ссылки на e-mail нужно в качестве URL’a написать:"></a> </div> <div class="text"> <h4>качестве URL’a написать: mailto:адрес электронной почты, например: <br> </h4> <a href="mailto:lisica@tut.by">Мой адрес</a><br>Организация внутренних ссылок, позволяющая осуществлять переход внутри текущей страницы, выполняется в два этапа:<br>а) сначала в нужных местах веб-страницы устанавливается закладка <br> <a name = "Закладка" > < /а >;<br>б) на втором этапе определяется ссылка на метку по следующему шаблону: Текст подсказки < a href = "#Закладка"> текст для щелчка мышью</а>.<br><br> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-11464146-5 --> <div id="yandex_rtb_R-A-11464146-5"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-5", "renderTo": "yandex_rtb_R-A-11464146-5" }) }) </script></div> <div class="content dl-content" style="margin-top: 20px"> <form action="" method="post" class="js_captcha dl-form"> <div> <ul> <li>Имя файла: htmlyazyk-gipertekstovoy-razmetki-dokumentov.pptx</li> <li>Количество просмотров: 92</li> <li>Количество скачиваний: 0</li> </ul> <div class="g-recaptcha" data-sitekey="6Lf0iN8nAAAAACKv8U8VhTtj8F1wq0TA-RBjxFb2"></div> <input type="submit" value="Скачать презентацию"> <input type="hidden" name="task" value="dodownload"> <input type="hidden" name="d089499a44d1976295b33881e309fd6f" value="1" /> </div> <div class="clear"></div> </form> <div class="adBlockDownload"> <div class="banners"></div> </div> </div> <div class="itemNavigation"> <div class="itemNavigation-wrapper"> <div class="itemNavigation-item"> - Предыдущая <a class="itemNavigation-link" href="/geografiya/natsionalnye-simvoly-velikobritanii">Национальные символы Великобритании</a> </div> <div class="itemNavigation-item"> Следующая - <a class="itemNavigation-link" href="/istoriya/pionery-geroi-4_">Пионеры - герои</a> </div> </div> </div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-11464146-1 --> <div id="yandex_rtb_R-A-11464146-1"></div> <script> window.yaContextCb.push(() => { Ya.Context.AdvManager.render({ "blockId": "R-A-11464146-1", "renderTo": "yandex_rtb_R-A-11464146-1" }) }) </script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/uncategorized/otstaivanie-stochnyh-vod"> <img src="/img/tmb/15/1452742/a950e466c820a80da8c949ad73a04b8b-210x.jpg" alt="Отстаивание сточных вод"> <span class="desc"> <span>Отстаивание сточных вод</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 84</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/igrushki-svoimi-rukami-snegorktida-prezentatsiya-k"> <img src="/img/tmb/8/739880/66aae293bf1f616a72ed45fcddce720a-210x.jpg" alt="Игрушки своими руками - Снегорктида презентация к занятию по конструированию, ручному труду (подготовительная группа) по теме"> <span class="desc"> <span>Игрушки своими руками - Снегорктида презентация к занятию по конструированию, ручному труду (подготовительная группа) по теме</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 89</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/prezentatsiya-razvivayushchey-sredy-uchastka-prezentatsiya-k"> <img src="/img/tmb/9/807809/8e18ddee4540e263e22bd99e0391b0ba-210x.jpg" alt="Презентация развивающей среды участка презентация к уроку (младшая группа)"> <span class="desc"> <span>Презентация развивающей среды участка презентация к уроку (младшая группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 36</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/rozhdestvo-hristovo-3"> <img src="/img/tmb/13/1255935/2110512910c51b07c0cec14a102bb625-210x.jpg" alt="Рождество Христово"> <span class="desc"> <span>Рождество Христово</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 92</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/domashnee-zadanie-dlya-gruppy-zvezdochki-po"> <img src="/img/tmb/9/829837/3f514abeb8af3a5448114b2eaa1db99e-210x.jpg" alt="Домашнее задание для группы Звездочки по теме Овощи презентация к занятию (средняя группа)"> <span class="desc"> <span>Домашнее задание для группы Звездочки по теме Овощи презентация к занятию (средняя группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 87</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/seminar-praktikum-dlya-vospitateley-razvitie-hudozhestvennogo"> <img src="/img/tmb/8/769504/4fef8a62711d804326750ddcd49677df-210x.jpg" alt="Семинар-практикум для воспитателей : Развитие художественного творчества в условиях внедрения парциальных программ И.А. Лыковой Цветные ладошки и Художественный труд презентация"> <span class="desc"> <span>Семинар-практикум для воспитателей : Развитие художественного творчества в условиях внедрения парциальных программ И.А. Лыковой Цветные ладошки и Художественный труд презентация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 138</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> <div class="cntWrapper"> <div class="list"> <h2 class="right-heading" id="related">Похожие презентации</h2> <div class="wrapper"> <a href="/uncategorized/proet-skazka-kak-sredstvo-nravstvennopatrioticheskogo-vospitaniya"> <img src="/img/tmb/8/756690/8f4f27b0f26bea57d9f1c936cbe52007-210x.jpg" alt="Проет Сказка как средство нравственно–патриотического воспитания проект (подготовительная группа)"> <span class="desc"> <span>Проет Сказка как средство нравственно–патриотического воспитания проект (подготовительная группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 139</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/chto-ya-lyublyu"> <img src="/img/tmb/15/1465642/d7a3ad1494fd1c0800f1483b63d75bb2-210x.jpg" alt="Что я люблю"> <span class="desc"> <span>Что я люблю</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 90</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/master-klass-sistema-raboty-s-odaryonnymi"> <img src="/img/tmb/9/814111/f2813a510cf737c6d27770f42340b487-210x.jpg" alt="Мастер-класс Система работы с одарёнными детьми в свете требований ФГОС НОО: развитие творческих способностей младших школьников учебно-методический материал"> <span class="desc"> <span>Мастер-класс Система работы с одарёнными детьми в свете требований ФГОС НОО: развитие творческих способностей младших школьников учебно-методический материал</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 167</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/552695-mizanstsena-obraznyy-yazyk-rezhissera-teatr"> <img src="/img/tmb/6/552695/2a14302ead79ab8ab15e5549e25848b2-210x.jpg" alt="Мизансцена - образный язык режиссера (Театр)"> <span class="desc"> <span>Мизансцена - образный язык режиссера (Театр)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 177</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/proekt-prava-rebenka-shag-v-budushchee"> <img src="/img/tmb/9/808839/e254f1aad2b0e634dc6d901bc3cfc1ff-210x.jpg" alt="Проект Права ребенка - шаг в будущее проект (младшая группа)"> <span class="desc"> <span>Проект Права ребенка - шаг в будущее проект (младшая группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 46</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/dekompressionnyy-mehanizm"> <img src="/img/tmb/13/1273371/026cff2838129bfd1e19f716bddd5114-210x.jpg" alt="Декомпрессионный механизм"> <span class="desc"> <span>Декомпрессионный механизм</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 112</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/tvorcheskiy-proekt-eto-zdorovo_"> <img src="/img/tmb/13/1261023/3cc5880d93a2e030de0f640ed79667c6-210x.jpg" alt="Творческий проект - это здорово"> <span class="desc"> <span>Творческий проект - это здорово</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 98</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/universalnye-uchebnye-deystviya-v-do-prezentatsiya"> <img src="/img/tmb/8/755850/4826de69a806bb48e1b427160f30c64b-210x.jpg" alt="Универсальные учебные действия в ДО презентация"> <span class="desc"> <span>Универсальные учебные действия в ДО презентация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 96</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/zashchitnye-mehanizmy"> <img src="/img/tmb/14/1338219/979261b2de8011c2d1a4c0e7ecf2e135-210x.jpg" alt="Защитные механизмы."> <span class="desc"> <span>Защитные механизмы.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 143</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/master-klass-izgotovlenie-otkrytki-v-tehnike"> <img src="/img/tmb/8/789969/2fcfaea801363d846b4284a8ff0cdc17-210x.jpg" alt="Мастер - класс Изготовление открытки в технике квиллинг материал"> <span class="desc"> <span>Мастер - класс Изготовление открытки в технике квиллинг материал</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 171</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/georgiy-sviridov-1"> <img src="/img/tmb/14/1392614/c5e486fe4b20e27c9862c77a13ccaebd-210x.jpg" alt="Георгий Свиридов"> <span class="desc"> <span>Георгий Свиридов</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 80</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/sindrom-barttera-2"> <img src="/img/tmb/13/1285633/752016bc5490b2e2f5a662b73cc91afa-210x.jpg" alt="СИНДРОМ БАРТТЕРА"> <span class="desc"> <span>СИНДРОМ БАРТТЕРА</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 92</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/rol-babushki-i-dedushki-v-vospitanii"> <img src="/img/tmb/9/843077/2bff76264beb5b10e4ad71e841ee8a00-210x.jpg" alt="Роль бабушки и дедушки в воспитании детей презентация"> <span class="desc"> <span>Роль бабушки и дедушки в воспитании детей презентация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 165</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/izobreteniya-olega-loseva-operedivshie-vremya"> <img src="/img/tmb/15/1408521/13c2747ec75b4a4b0ca0105898be8d12-210x.jpg" alt="Изобретения Олега Лосева, опередившие время"> <span class="desc"> <span>Изобретения Олега Лосева, опередившие время</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 131</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/film-titanik"> <img src="/img/tmb/14/1360061/2225e5a5bf0d059680518aa3ad23f4a4-210x.jpg" alt="Фильм Титаник"> <span class="desc"> <span>Фильм Титаник</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 107</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/skayp-konferentsiya-kak-ya-stroyu-otnosheniya"> <img src="/img/tmb/14/1312031/79a0f4f7e99f981d07035eda6e20a812-210x.jpg" alt="Скайп конференция! Как я строю отношения с мужчиной ?7 Февраля 22:00 по Московскому временитрансляция из США"> <span class="desc"> <span>Скайп конференция! Как я строю отношения с мужчиной ?7 Февраля 22:00 по Московскому временитрансляция из США</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 153</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/osnovy-himii-glin-i-glinoporoshkov"> <img src="/img/tmb/15/1462857/095f1345e680e16d35ca09e65e28fbcb-210x.jpg" alt="Основы химии глин и глинопорошков"> <span class="desc"> <span>Основы химии глин и глинопорошков</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 109</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/prezentatsiya-8716"> <img src="/img/tmb/8/783925/f694c458f9a21495778149d7dd9fea11-210x.jpg" alt="Презентация"> <span class="desc"> <span>Презентация</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 119</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/524479-vesennie-tsvety-3"> <img src="/img/tmb/6/524479/d41e8628e3a1db49512ffff3b7a8a529-210x.jpg" alt="Весенние цветы"> <span class="desc"> <span>Весенние цветы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 160</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/operatsionnyy-menedzhment_"> <img src="/img/tmb/14/1318026/8f470283d59a86d577cb49ee50ee2cb9-210x.jpg" alt="Операционный менеджмент"> <span class="desc"> <span>Операционный менеджмент</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 136</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/proekt-aty-baty-shli-soldaty-v"> <img src="/img/tmb/8/798814/d9adedc9729279feb1b3dc9907f26c7f-210x.jpg" alt="Проект Аты-баты, шли солдаты в подготовительной к школе группе проект (подготовительная группа)"> <span class="desc"> <span>Проект Аты-баты, шли солдаты в подготовительной к школе группе проект (подготовительная группа)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 123</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/igraem-1"> <img src="/img/tmb/8/753317/06cfc494c2ad2fdb8fdb77e879228295-210x.jpg" alt="igraem"> <span class="desc"> <span>igraem</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 180</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/vektory-spiski-posledovatelnosti"> <img src="/img/tmb/14/1389890/500dea00b45d5640ccde5a38aee83023-210x.jpg" alt="Векторы, списки, последовательности"> <span class="desc"> <span>Векторы, списки, последовательности</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 96</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/rezhim-dnya-pervoklassnika-prezentatsiya-prezentatsiya-k"> <img src="/img/tmb/8/780756/5c3790a378c354b0b9ffcba1dec7e939-210x.jpg" alt="Режим дня первоклассника (презентация) презентация к уроку (1 класс)"> <span class="desc"> <span>Режим дня первоклассника (презентация) презентация к уроку (1 класс)</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 179</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> <script src="/templates/presentation/js/script.js?7ae5a315ef1850f1ab2723f8f8484030"></script> </body> </html>