Презентация Занятие 3 Абзацы и заголовки

Скачать презентацию  Занятие 3 Абзацы и заголовки Скачать презентацию Занятие 3 Абзацы и заголовки

zanyatie_3_abzacy_i_zagolovki.ppt

  • Размер: 2.2 Mегабайта
  • Количество слайдов: 20

Описание презентации Презентация Занятие 3 Абзацы и заголовки по слайдам

  Начать обучение Красноярск - 2012Тема: Абзацы и заголовки. Занятие № 3 © Surgucheva Irina Начать обучение Красноярск — 2012Тема: Абзацы и заголовки. Занятие № 3 © Surgucheva Irina Курс ведёт : Сургучёва Ирина Николаевна Для связи: E-mail: lara 1233@yandex. ru Skype: lovez_snov_irena

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

  Для изучения темы сегодняшнего урока нам понадобится статья.  Чтобы самим не набирать текст, Для изучения темы сегодняшнего урока нам понадобится статья. Чтобы самим не набирать текст, я предлагаю скопировать из Интернета статью «Обзор бесплатных антивирусных программ» . Ниже дана ссылка. Нажмите на неё и Вы перейдёте на сайт, с которого мы будем брать информацию. http : // fantivirus. ru / page / obzor-free-antivirus Итак, статья у Вас открыта. Теперь нужно открыть документ, который мы создали на прошлом занятии index. html. Я просила Вас для нашего курса создать папку «Изучение HTML » и первый документ сохранить именно в этой папке. 1. Откройте папку «Изучение HTML »

  2.  Для того чтобы открыть созданный нами документ index. html  не в 2. Для того чтобы открыть созданный нами документ index. html не в окне браузера а в программе Notepad++ нужно правой кнопкой мыши щёлкнуть по документу и в появившемся меню выбрать пункт Edit with Notepad++ (редактировать с помощью Notepad++ ) Результат – откроется созданный нами на прошлом занятии документ

  3. Давайте внесём некоторые изменения:  - поменяем название заголовка web -страницы, как Вы 3. Давайте внесём некоторые изменения: — поменяем название заголовка web -страницы, как Вы помните за это отвечает тег . Удалите название Первый урок и напишите: Обзор бесплатных антивирусов. — удалите текст, который находится между тегами , теперь он нам не нужен и на его место встанет статья, которую мы скопируем из Интернета. — сохраним документ. Сохранение документа: Ctrl S+ 2 способ : нажать дискетку 1 способ : Файл Сохранить 3 способ : нажать по другой дискетке 4 способ : сочетание горячих клавиш. Изменить название Удалить текст Запомните!!!</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" После изменения у Вас должен получиться вот такой документ: " title=" После изменения у Вас должен получиться вот такой документ: " src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_5.jpg"> После изменения у Вас должен получиться вот такой документ:</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 4. Откройте сайт где располагается статья и давайте скопируем первый блок текста. " title=" 4. Откройте сайт где располагается статья и давайте скопируем первый блок текста. " src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_6.jpg"> 4. Откройте сайт где располагается статья и давайте скопируем первый блок текста. Почему не весь текст, спросите Вы? Потому, что далее идёт блок с картинками, а он нам не нужен, поэтому мы выделяем: первый заголовок и первый абзац текста. Копирование: 1 способ: выделить текст правой кнопкой мыши по выделенному тексту копировать 2 способ: выделить текст нажать на клавиатуре сочетание горячих клавиш: Ctrl +</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 5. Перейдем в программу Notepad++ в наш документ index. html и между тегами" title=" 5. Перейдем в программу Notepad++ в наш документ index. html и между тегами" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_7.jpg"> 5. Перейдем в программу Notepad++ в наш документ index. html и между тегами вставим текст, который мы только что скопировали. 6. Сохраните наш документ, используя сочетание горячих клавиш CTRL + S 7. Нажмите Запуск Launch in IE (просмотреть в Internet Explorer)Вставка скопированного: 1 способ: установить курсор в нужное место правой кнопкой мыши вставить 2 способ: установить курсор в нужное место нажать на клавиатуре сочетание горячих клавиш: Ctrl + V</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Браузер должен показать следующее: Как Вы заметили, все настройки текста, которые были в" title=" Браузер должен показать следующее: Как Вы заметили, все настройки текста, которые были в" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_8.jpg"> Браузер должен показать следующее: Как Вы заметили, все настройки текста, которые были в статье исчезли. А именно шрифт изменился, заголовок не выделился. Почему так произошло? Давайте это разберём. Перейдите сейчас в программу Notepad++ к нашему документу, как Вы видите заголовок у нас отделён (хотя браузер этого не показывает) от основного текста, а весь последующий абзац расположен на одной строке ниже. Так как мы сейчас уже практически подошли к изучению новых тегов, такое расположение текста нам будет крайне неудобно, так как для написания конечных тегов нам придётся постоянно перемещаться по документу в конец текстового абзаца. Для удобства предлагаю разделить текст, который вставился в одну строку, при помощи клавиши ENTER. Сделать так, чтоб его было видно весь без пролистывания. посмотреть как это сделать</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Результат: была нажата клавиша ENTER это мы сделали для того, чтобы текст не был" title=" Результат: была нажата клавиша ENTER это мы сделали для того, чтобы текст не был" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_9.jpg"> Результат: была нажата клавиша ENTER это мы сделали для того, чтобы текст не был в одну строку и имел более компактный вид Сохраните используя комбинацию горячих клавиш: Ctrl + S. Просмотрите что получилось.</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Как видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему" title=" Как видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_10.jpg"> Как видите ничего у нас не изменилось. Возвращаемся к нашему вопросу. Почему настройки произведённые в программе Notepad++ — отступы, дополнительные пробелы, переносы не отображаются браузером? А дело вот в чём, браузер воспринимает только команды – теги. Команд на разделение текста и переносы ему не было, поэтому он вывел нам весь текст одни сплошным блоком. Как же отредактировать наш текст, чтобы у нас отделились заголовки и абзацы? И вот здесь нам на помощь приходит новый тег. Результат: Описание Тег <p> определяет текстовый абзац. Тег <p> является блочным элементом, всегда начинается с новой строки, абзацы текста идущие друг за другом разделяются между собой отбивкой. Величиной отбивки можно управлять с помощью стилей. Если закрывающего тега нет, считается, что конец абзаца совпадает с началом следующего блочного элемента. Синтаксис <p> Текст</p> </p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 8. Давайте попробуем вставить тег p в наш документ. И для" title=" 8. Давайте попробуем вставить тег p в наш документ. И для" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_11.jpg"> 8. Давайте попробуем вставить тег <p> в наш документ. И для начала отделим заголовок от текста. Для этого откроем тег <p> перед началом заголовка и закроем его в конце заголовка</p> <p>. На скриншоте расположенным ниже это хорошо видно. Сохраните используя горячие клавиши и просмотрите результат использования нашего тега. результат использования тега абзаца </p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 9. Как Вы увидели тег p сработал и заголовок у нас отделился от основного" title=" 9. Как Вы увидели тег p сработал и заголовок у нас отделился от основного" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_12.jpg"> 9. Как Вы увидели тег <p> сработал и заголовок у нас отделился от основного текста. Теперь давайте вернёмся с Вами на сайт, где расположена статья и скопируем весь оставшийся текст. 10. Произведите выделение как показана на скриншотах ниже от AVG Antivirus Free Edition дополнительные программы их включать в выделение уже не надо. 11. Скопируйте выделение используя горячие клавиши (как копировать было описано выше). 12. Перейдите в программу Notepad++ . Установите курсор в конце последнего предложения уже имеющегося у нас текста и нажмите Enter — чтобы создать новую пустую строку. Вставьте скопированный текст в эту строку (как вставлять скопированные данные было описано выше).</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Результат: как вы видите текст у нас имеет отступы, давайте сохраним и посмотрим, что" title=" Результат: как вы видите текст у нас имеет отступы, давайте сохраним и посмотрим, что" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_13.jpg"> Результат: как вы видите текст у нас имеет отступы, давайте сохраним и посмотрим, что нам покажет браузер. Браузер вывел весь текст одним сплошным блоком и я уже рассказывала Вам, почему так происходит.</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 13. Давайте разделим текст на абзацы используя новый тег p. Отделите все заголовки," title=" 13. Давайте разделим текст на абзацы используя новый тег p. Отделите все заголовки," src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_14.jpg"> 13. Давайте разделим текст на абзацы используя новый тег <p>. Отделите все заголовки, текстовые абзацы и тексты списков (в данном случае, если вы посмотрите на сайте есть маркированные списки) тегами абзацев. И все длинные абзацы, которые уходят за границу видимости перенесите, таким образом, чтоб весь текст помещался в зону видимости без прокрутки по горизонтали. Заголовки отделить тегом <p> Текстовые абзацы заключить в тег <p> и перенести текст таким образом, чтоб он был в поле видимости, без прокрутки по горизонтали. верно не верно посмотреть что получилось</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Результат: Для того, чтобы каждый раз в программе Notepad++ не нажимать ЗАПУСК." title=" Результат: Для того, чтобы каждый раз в программе Notepad++ не нажимать ЗАПУСК." src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_15.jpg"> Результат: Для того, чтобы каждый раз в программе Notepad++ не нажимать ЗАПУСК. После сохранения документа перейдите в открытый браузер с последним вариантом вашей работы и нажмите на указанный стрелочкой значок – ОБНОВИТЬ. Браузер обновит и выдаст новую сохранённую страницу. Задание: расставить абзацы для всего текста самостоятельно. Не забудьте, про списки, так как эту тему мы еще не изучали, то заключите все элементы списков (текст) тоже в тег абзаца.</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Итак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где" title=" Итак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_16.jpg"> Итак, надеюсь Вы правильно проставили все абзацы. Перейдите на сайт, где находится статья и посмотрите у статьи имеются заголовки, а в нашем документе заголовки выглядят как простой текст, единственное, что мы смогли сделать это отделить их от основного текста. Теперь пора нам научиться делать красивые и правильно расставленные (по значимости) заголовки. И здесь нам на помощь приходят новые теги. Описание HTML предлагает шесть заголовков разного уровня, которые показывают относительную важность текста, расположенной после заголовка. Так, тег представляет собой наиболее важный заголовок первого уровня, а тег служит для обозначения заголовка шестого уровня и является наименее значительным. По умолчанию, заголовок первого уровня отображается самым крупным шрифтом жирного начертания, заголовки последующего уровня по размеру меньше. Теги , . . . , относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство. Синтаксис ( тег парный нужно закрывать) Заголовок первого уровня Заголовок второго уровня Заголовок третьего уровня Заголовок четвёртого уровня Заголовок пятого уровня Заголовок шестого уровня 14. Давайте сейчас наш самый первый заголовок, заключим в тег , потому что это название всей статьи и он получается самый главный. Вот так это должно выглядеть у Вас: Обзор бесплатных антивирусов Тег <p> мы убираем, потому что теги от до являются блочными элементами и когда мы их устанавливаем до и после заголовка добавляется пустое пространство и автоматически заголовок отделяется от основного текста.</p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания" title=" 15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_17.jpg"> 15. Сохраните и посмотрите, что получилось. Наш заголовок стал жирного начертания и размер шрифта увеличился. 16. Давайте подзаголовки – названия антивирусных программ, выделим, но не забываем о том, что главный заголовок используется на странице один раз. Дальше мы должны использовать теги заголовков меньшего уровня. Для этого воспользуемся тегом </p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" 17. Как Вы видите подзаголовок изменился – стал жирного начертания и размер шрифта" title=" 17. Как Вы видите подзаголовок изменился – стал жирного начертания и размер шрифта" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_18.jpg"> 17. Как Вы видите подзаголовок изменился – стал жирного начертания и размер шрифта увеличился. Но заголовок 2-го уровня как Вы видите отличается от главного заголовка первого уровня, по размеру он меньше. Задание: заключить все названия антивирусных программ (заголовки) в тег . Подобрать для заголовков: (Возможности, недостатки антивирусных программ) свой тег заголовка. Например: Главные возможности программы: </p> </div> <div class="description" itemscope itemtype="http://schema.org/ImageObject"><meta itemprop="name" content="" /><meta itemprop="width" content="720 px" /><meta itemprop="height" content="540 px" /> <p itemprop="description caption"><img class="imgdescription" itemprop="contentUrl thumbnail" alt=" Итак, сегодня Вы познакомились: с тегом отвечающим за создание абзаца и с" title=" Итак, сегодня Вы познакомились: с тегом отвечающим за создание абзаца и с" src="/docs//zanyatie_3_abzacy_i_zagolovki_images/zanyatie_3_abzacy_i_zagolovki_19.jpg"> Итак, сегодня Вы познакомились: с тегом отвечающим за создание абзаца и с тегами отвечающими за создание заголовков разного уровня. Научились использовать горячие клавиши для сохранения документа, а также для копирования и вставки. Это всё, жду Вас в следующем уроке, где мы продолжим изучение языка HTML – тема «Списки» Лабораторная работа № 1 Отредактируйте статью (расставьте все абзацы и сделайте заголовки) и пришлите её мне через сайт Виртуальной школы. Для этого Вам нужно будет сохранить отредактированный файл index. html , заархивировать его программой Win. Rar и через свой ученический аккаунт отправить мне эту работу на оценку.</p> </div> </div> <div class="slidedescription"> <!--end entry-content--> </div> </article><!-- .post --> <div class='ommententries'> <!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="//vk.com/js/api/openapi.js?117"></script> <script type="text/javascript"> VK.init({apiId: 5041257, onlyWidgets: true}); </script> <!-- Put this div tag to the place, where the Comments block will be --> <div id="vk_comments"></div> <a id="vk_comments"></a> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 5, width: "auto", attach: false}); </script> </div> </section><!-- #content --> <aside class="columns three sidebar sidebar-right" style="width: 18%;"> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- Present5_Single_RightSidebar --> <ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-4162702590992263" data-ad-slot="8196114805"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script> <div class='vkwidjet'> <script type="text/javascript" src="//vk.com/js/api/openapi.js?116"></script> <!-- VK Widget --> <div id="vk_groups"></div> <script type="text/javascript"> VK.Widgets.Group("vk_groups", {mode: 0, width: "240", height: "250", color1: 'FFFFFF', color2: '7E868C', color3: 'E9A40E'}, 100599845); </script> </div> <section class="widget"> <ul> <li class="cat-item cat-item-48"><a href="http://present5.com/notdefine/" >Неуточненные</a> </li> <li class="cat-item cat-item-20"><a href="http://present5.com/prezentaciya-po-anglijskomu/" >Английский язык</a> </li> <li class="cat-item cat-item-31"><a href="http://present5.com/prezentaciya-po-mxk/" >МХК</a> </li> <li class="cat-item cat-item-26"><a href="http://present5.com/prezentaciya-po-matematike/" >Математика</a> </li> <li class="cat-item cat-item-25"><a href="http://present5.com/prezentaciya-po-ximii/" >Химия</a> </li> <li class="cat-item cat-item-27"><a href="http://present5.com/prezentaciya-po-russkomu/" >Русский язык</a> </li> <li class="cat-item cat-item-28"><a href="http://present5.com/prezentaciya-po-literature/" >Литература</a> </li> <li class="cat-item cat-item-24"><a href="http://present5.com/prezentaciya-po-geografii/" >География</a> </li> <li class="cat-item cat-item-22"><a href="http://present5.com/prezentaciya-po-biologii/" >Биология</a> </li> <li class="cat-item cat-item-44"><a href="http://present5.com/prof/" >Профессии</a> </li> <li class="cat-item cat-item-21"><a href="http://present5.com/prezentaciya-po-informatike/" >Информатика</a> </li> <li class="cat-item cat-item-19"><a href="http://present5.com/prezentaciya-po-istorii/" >История</a> </li> <li class="cat-item cat-item-29"><a href="http://present5.com/prezentaciya-po-psixologii/" >Психология</a> </li> <li class="cat-item cat-item-30"><a href="http://present5.com/prezentaciya-po-obzh/" >ОБЖ</a> </li> <li class="cat-item cat-item-32"><a href="http://present5.com/prezentaciya-po-obshhestvoznaniyu/" >Обществознание</a> </li> <li class="cat-item cat-item-23"><a href="http://present5.com/prezentaciya-po-fizike/" >Физика</a> </li> <li class="cat-item cat-item-40"><a href="http://present5.com/fizkultura/" >Физкультура</a> </li> <li class="cat-item cat-item-45"><a href="http://present5.com/prazdniki/" >Праздники</a> </li> <li class="cat-item cat-item-43"><a href="http://present5.com/med/" >Медицина</a> </li> <li class="cat-item cat-item-33"><a href="http://present5.com/prezentaciya-po-ekonomike/" >Экономика</a> </li> <li class="cat-item cat-item-47"><a href="http://present5.com/pedagocik/" >Педагогика</a> </li> <li class="cat-item cat-item-35"><a href="http://present5.com/prezentaciya-po-filosofii/" >Философия</a> </li> <li class="cat-item cat-item-46"><a href="http://present5.com/doschool/" >Дошкольникам</a> </li> </ul> </section> <section class="widget widget-most-popular"> <div class="widget-entry"> <div id="sidebarrelated"> <div id="text-2" class="box_small box widget widget_text"><div class="crp_related crp_related_shortcode "><div class="gallery_entry_related"><a href="http://present5.com/prezentaciya-html-css1/" ><img src="http://present5.com/wp-content/uploads/html-css1-180x135.jpg" alt="Презентация html-css1" title="Презентация html-css1" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/prezentaciya-html-css1/" class="crp_title">Презентация html-css1</a></div><div class="gallery_entry_related"><a href="http://present5.com/html-osnovnye-ponyatiya-html-hyper/" ><img src="http://present5.com/wp-content/uploads/html1_text_short-180x135.jpg" alt="HTML – основные понятия HTML ( Hyper." title="HTML – основные понятия HTML ( Hyper." width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/html-osnovnye-ponyatiya-html-hyper/" class="crp_title">HTML – основные понятия HTML ( Hyper.</a></div><div class="gallery_entry_related"><a href="http://present5.com/prezentaciya-abzac-stili-kolonki/" ><img src="http://present5.com/wp-content/uploads/abzac._stili._kolonki.-180x135.jpg" alt="Презентация Абзац. Стили. Колонки." title="Презентация Абзац. Стили. Колонки." width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/prezentaciya-abzac-stili-kolonki/" class="crp_title">Презентация Абзац. Стили. Колонки.</a></div><div class="gallery_entry_related"><a href="http://present5.com/nazvanie-temy-prezentacii-nazvanie-temy-prezentacii-familiya/" ><img src="http://present5.com/wp-content/uploads/prezentacija_urfu_2_full-180x135.jpg" alt="НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Название темы презентации Фамилия" title="НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Название темы презентации Фамилия" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/nazvanie-temy-prezentacii-nazvanie-temy-prezentacii-familiya/" class="crp_title">НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Название темы презентации Фамилия</a></div><div class="gallery_entry_related"><a href="http://present5.com/zanyatie-4-sozdanie-sajtov-sredstvami-ms-office/" ><img src="http://present5.com/wp-content/uploads/4_sozdanie_saytov_v_ms_office-180x135.jpg" alt="Занятие 4. Создание сайтов средствами MS Office ©" title="Занятие 4. Создание сайтов средствами MS Office ©" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/zanyatie-4-sozdanie-sajtov-sredstvami-ms-office/" class="crp_title">Занятие 4. Создание сайтов средствами MS Office ©</a></div><div class="gallery_entry_related"><a href="http://present5.com/nazvanie-temy-prezentacii-dokladchik-familiya-imya-otchestvo-uchenaya/" ><img src="http://present5.com/wp-content/uploads/prezentacija_urfu_3_full-180x135.jpg" alt="НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Докладчик Фамилия Имя Отчество Ученая" title="НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Докладчик Фамилия Имя Отчество Ученая" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/nazvanie-temy-prezentacii-dokladchik-familiya-imya-otchestvo-uchenaya/" class="crp_title">НАЗВАНИЕ ТЕМЫ ПРЕЗЕНТАЦИИ Докладчик Фамилия Имя Отчество Ученая</a></div><div class="gallery_entry_related"><a href="http://present5.com/tema-8-tekstovyj-processor-m-icrosoft-word/" ><img src="http://present5.com/wp-content/uploads/theme_08.ppt_0-180x135.jpg" alt="Тема 8. Текстовый процессор M icrosoft Word." title="Тема 8. Текстовый процессор M icrosoft Word." width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/tema-8-tekstovyj-processor-m-icrosoft-word/" class="crp_title">Тема 8. Текстовый процессор M icrosoft Word.</a></div><div class="gallery_entry_related"><a href="http://present5.com/izdatelskaya-sistema-osnovnye-ponyatiya-osnovnye-ponyatiya/" ><img src="http://present5.com/wp-content/uploads/2012-13_it_v_so_id_1_lektsia_456gr-180x135.jpg" alt="Издательская система Основные понятия Основные понятия" title="Издательская система Основные понятия Основные понятия" width="180" height="135" class="crp_thumb crp_featured" /></a><a href="http://present5.com/izdatelskaya-sistema-osnovnye-ponyatiya-osnovnye-ponyatiya/" class="crp_title">Издательская система Основные понятия Основные понятия</a></div><div class="crp_clear"></div></div></div></div> </div> </section> </aside><!--#sidebar--> </div> </div> <!-- #content-wrapper --> <footer id="footer"> <div class="container"> <div class="columns twelve"> <!--noindex--> <!--LiveInternet counter--><script type="text/javascript"><!-- document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+ escape(document.referrer)+((typeof(screen)=="undefined")?"": ";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+ ";"+Math.random()+ "' alt='' title='"+" ' "+ "border='0' width='1' height='1'><\/a>") //--></script><!--/LiveInternet--> <script> $(window).load(function() { var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0]; document.getElementById("owlheader").insertBefore(owl, null); $('#owlheader').css('display', 'inline-block'); }); </script> <script type="text/javascript"> var yaParams = {'typepage': 'auto-doc'}; </script> <!-- Yandex.Metrika counter --> <script type="text/javascript"> (function (d, w, c) { (w[c] = w[c] || []).push(function() { try { w.yaCounter32395810 = new Ya.Metrika({ id:32395810, clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true, params: yaParams }); } catch(e) { } }); var n = d.getElementsByTagName("script")[0], s = d.createElement("script"), f = function () { n.parentNode.insertBefore(s, n); }; s.type = "text/javascript"; s.async = true; s.src = "https://mc.yandex.ru/metrika/watch.js"; if (w.opera == "[object Opera]") { d.addEventListener("DOMContentLoaded", f, false); } else { f(); } })(document, window, "yandex_metrika_callbacks"); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter --> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','https://www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-68771388-1', 'auto'); ga('send', 'pageview'); </script> <!--/noindex--> <nav id="top-nav"> <ul id="menu-top" class="top-menu clearfix"><li id="menu-item-247" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-247"><a href="http://present5.com/sitemap/">Карта Сайта</a></li> </ul> </nav><!-- #top-nav--> <!-- #interaction-sec --> </div> </div><!--.container--> </footer><!--#footer--> <script type="text/javascript"> jQuery(document).ready(function($) { $("div.wp-report-post-body").append('<div class=\"wp-report-post-box\"> <div class=\"wp-report-post-sent\"> <p>Большое спасибо за бдительность! Мы обязательно проверим эту ссылку и заменим её. Скоро вы снова сможете скачать эту презентацию!</p> <a class=\"wp-report-post-button\" id=\"wp-report-post-dismiss\">Закрыть</a> </div> <form method=\"post\" id=\"wp-report-post-form\" class=\"wp-report-post-form\"> <input type=\"hidden\" name=\"action\" id=\"wp-report-post-action\" value=\"wp_report_post_ajax\" /> <input type=\"hidden\" name=\"wp_report_post_id\" id=\"wp-report-post-id\" value=\"30140\" /> <input type=\"hidden\" name=\"wp_report_post_user_id\" id=\"wp-report-post-user-id\" value=\"0\" /> <div class=\"wp-report-post-row\"> <div class=\"clear-both\"></div> </div> <div class=\"wp-report-post-msg\">You have already reported this post before.</div> <div class=\"wp-report-post-form-left\"> <a class=\"wp-report-post-button\" id=\"wp-report-post-submit\">Отправить сообщение об ошибке</a> </div> <div class=\"clear-both\"></div> </form></div>'); $("#wp-report-post-cancel, #wp-report-post-dismiss").click(function(e) { var $box = $(".wp-report-post-box"); $box.slideUp(600); e.preventDefault(); }); $("#wp-report-post-submit").click(function(e) { $("#wp-report-post-form input, #wp-report-post-form textarea").removeClass("wp-report-post-error"); $(".wp-report-post-msg").css("display", "none"); $.post( "http://present5.com/wp-admin/admin-ajax.php", $("#wp-report-post-form").serialize(), function(data) { console.log(data.last_query); console.log(data.last_error); if (data.error) { $.each(data.errors, function(e) { $("#"+e).addClass("wp-report-post-error"); }); } if (data.success) { $("#wp-report-post-form").slideUp(600, function() { $(".wp-report-post-sent").slideDown(600); }); } if (data.already_reported) { $(".wp-report-post-msg").css("display", "block"); } }, "json" ); }); $(".wp-report-post-link").click(function(e) { $("#wp-report-post-form input, #wp-report-post-form textarea").removeClass("wp-report-post-error"); $(".wp-report-post-msg").css("display", "none"); var post_id = $(this).attr("post-id"); var $box = $(".wp-report-post-box"); $box.slideDown(600); e.preventDefault(); }); }); </script> <script type='text/javascript' src='http://present5.com/wp-content/plugins/contact-form-7/includes/js/jquery.form.min.js?ver=3.51.0-2014.06.20'></script> <script type='text/javascript'> /* <![CDATA[ */ var _wpcf7 = {"loaderUrl":"http:\/\/present5.com\/wp-content\/plugins\/contact-form-7\/images\/ajax-loader.gif","sending":"\u041e\u0442\u043f\u0440\u0430\u0432\u043a\u0430..."}; /* ]]> */ </script> <script type='text/javascript' src='http://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=4.2.2'></script> <script type='text/javascript' src='http://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.5.5'></script> <script type='text/javascript' src='http://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.1'></script> <script type='text/javascript' src='http://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.5.5'></script> <script type='text/javascript' src='http://present5.com/wp-includes/js/comment-reply.min.js?ver=4.5.5'></script> <!--[if lt IE 9]> <script type='text/javascript' src='http://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script> <![endif]--> <script type='text/javascript' src='http://present5.com/wp-includes/js/wp-embed.min.js?ver=4.5.5'></script> </body> </html>