2 Development Techniques. HTML _presentation3_ 1 variant

  • ppt
  • 09.05.2020
Публикация на сайте для учителей

Публикация педагогических разработок

Бесплатное участие. Свидетельство автора сразу.
Мгновенные 10 документов в портфолио.

Иконка файла материала 2 Development Techniques. HTML _presentation3_ 1 variant.ppt

HTML

Learning objective
10.4.2.1 use HTML tags when developing webpages

WHAT IS LIST ? In your life …

You have a list of your friends, telephone list and back list (people you dislike).
Every day you have a lot of something to do. So you must have a list for this to be in order.

In HTML…
Assume that you want to develop your site, so you should have a menu about your .
Menu appear as a vertical or horizontal.
You will use list to keep your verical menu in order.
Sometimes you will use lists with vertical menu, when you have sub menu.

Vertical menu

Horizontal menu

Horizontal menu with sub menu

WHAT IS LIST ?

TYPE OF LISTS

Ordered List
Unordered list

ORDERED LIST

When you want to order something you can order this by differnet method.
Type of ordered List
something
something else
another thing
---------------------------
something
something else
another thing
----------------------------
something
something else
another thing

ORDERED LIST



  1. Coffee

  2. Milk

Ordered list starts with

    tag.
    Each list item starts with the
  1. tag.

    Test Code

    Result

    Coffe
    Milk

ORDERED LIST EXAMPLE

Letters list:



  1. Apples

  2. Bananas

  3. Lemons

  4. Oranges



Lowercase letters list:



  1. Apples

  2. Bananas

  3. Lemons

  4. Oranges

Letters list:
Apples
Bananas
Lemons
Oranges

Lowercase letters list:
Apples
Bananas
Lemons
Oranges

Result

Test Code

ORDERED LIST EXAMPLE

Roman numbers list:



  1. Apples

  2. Bananas

  3. Lemons

  4. Oranges



Lowercase Roman numbers list:



  1. Apples

  2. Bananas

  3. Lemons

  4. Oranges

Roman numbers list:
Apples
Bananas
Lemons
Oranges

Lowercase Roman numbers list:
Apples
Bananas
Lemons
Oranges

Result

Test Code

UNORDERED LIST

When you want to order something you can order this by differnet method.
Type of ordered List
Disc bullets type
Something
Something else
Another thing
------------------------------
Circle bullets type
Something
Something else
Another something
---------------------------------
Square bullets type
Something
Something else
Another something

ORDERED LIST



  • Coffee

  • Milk

An unordered list starts with the

    tag..
    Each list item starts with the
  • tag.
    The list items are marked with bullets (typically small black circles).

    Test Code

    Result
    Coffe
    Milk

ORDERED LIST EXAMPLE

Disc bullets list:



  • Apples

  • Bananas

  • Lemons

  • Oranges



Circle bullets list:



  • Apples

  • Bananas

  • Lemons

  • Oranges



Square bullets list:



  • Apples

  • Bananas

  • Lemons

  • Oranges

Disc bullets list:
Apple
Bananas
Lemons
Oranges

Disc bullets list:
oApple oBananas oLemons oOranges

Square bullets list:
Apple
Banans
Lemons
Oranges

Result

Test Code

know the basics of web programming and be able to compare the methods of creating websites

Skills

Criteria for success

The student has achieved the learning goal if

Apply of knowledge

Illustrates the skill of using the tags , , , Ordered List, Unordered list when creating your own web page</p></td></tr></table><strong><p style="text-align: center">Task for individual work:<br></strong><br><strong>Creating a web-page using handout #1</strong></p> </div> </div> <div class="media-material-detail-body-presentation__container"> <div class="media-material-detail-body-presentation-image__container"> <a href="https://fs.znanio.ru/d5af0e/fc/4e/db0307c5408683903471f7be2219d4143e.jpg" title="Ссылка на снимок материала: " target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/fc/4e/db0307c5408683903471f7be2219d4143e.jpg" alt="" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> </div> </div> </div> <div class="material-detail-after-content-ads__container"> <div id="yandex_rtb_R-A-1580174-12"></div> </div> <div class="media-material-detail__copyright"> <p> Материалы на данной страницы взяты из открытых источников либо размещены пользователем в соответствии с договором-офертой сайта. Вы можете <a href="https://znanio.ru/docs/tmp/report_violation.html" title="Сообщить о нарушении" target="_blank">сообщить о нарушении</a>. </p> </div> </div> <div class="media-material-detail-download__container"> <form class="media-material-detail-download__form" action="https://znanio.ru/media/2-development-techniques-html-presentation3-1-variant-2586566/download" method="post" target="_blank"> <div class="media-material-detail-download__operation"> <input name="email" type="text" placeholder="Введите ваш E-mail"/> <div class="media-material-detail-download-button__container"> <button class="button button--primary media-material-download__js" type="submit">Скачать</button> </div> </div> <label class="media-material-detail-download__label"> <input type="checkbox" name="agree" checked="checked" disabled="disabled" /> Нажимая кнопку «Скачать», вы принимаете условия <a href="https://znanio.ru/docs/o.pdf" title="Пользовательское соглашение" target="_blank">оферты</a>, <a href="https://znanio.ru/docs/pk.pdf" title="Политика персональных данных" target="_blank">обработки и защиты личных данных</a> и подключаете бесплатные почтовые уведомления с возможностью отписки. </label> </form> <button class="button button--default media-material-detail-download__button move-up__js"> <img src="https://znanio.ru/build/assets/img/icon/arrow-up.svg" alt="Иконка стрелки вверх"> </button> </div> <footer class="copyright__container"> <div class="copyright-base__container"> © ООО «Знанио»<br><br>С вами с 2009 года. <img class="copyright-restriction__image" src="https://znanio.ru/build/assets/img/footer/restriction.png" alt="Изображение возрастные ограничения 12+"/> </div> <div class="copyright-about__container"> <p><strong>О портале</strong></p> <ul class="copyright-about__list"> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" rel="nofollow" title="Сведения об организации" target="_blank">Сведения об организации</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/o.pdf" rel="nofollow" title="Пользовательское соглашение" target="_blank">Пользовательское<br>соглашение</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/pk.pdf" rel="nofollow" title="Политика конфиденциальности" target="_blank">Политика конфиденциальности</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/pk.pdf" rel="nofollow" title="Политика персональных данных" target="_blank">Политика персональных данных</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/p" title="Проверка документов" target="_blank">Проверка документов</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Обратная связь" target="_blank">Обратная связь</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Рекламодателям" target="_blank">Рекламодателям</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/tmp/report_violation.html" title="Сообщить о нарушении" target="_blank">Сообщить о нарушении</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Центр поддержки" target="_blank">Центр поддержки</a> </li> </ul> </div> <div class="copyright-social__container"> <p><strong>Мы в соцсетях</strong></p> <ul class="copyright-social__list"> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://vk.com/znanioru" title="Вконтакте" target="_blank">Вконтакте</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://ok.ru/znanioru" title="Одноклассники" target="_blank">Одноклассники</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://www.facebook.com/znanioru" title="Фейсбук" target="_blank">Фейсбук</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://instagram.com/znanioru" title="Инстаграм" target="_blank">Инстаграм</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://www.youtube.com/channel/UCcKrjMPh-3ZwjCi_UQTNHXg" title="Ютьюб" target="_blank">Ютьюб</a> </li> </ul> </div> <div class="copyright-license__container"> <ul class="copyright-license__list"> <li class="copyright-license__item"> <img class="copyright-license__image" src="https://znanio.ru/build/assets/img/footer/gerb-license.png" alt="Изображение образовательная лицензия"/> <a class="copyright-license__link" href="https://znanio.ru/docs/li.pdf" title="Образовательная лицензия" target="_blank">Образовательная лицензия №5257 от 09.09.2020 (Л035-01253-67/00192487)</a> </li> <li class="copyright-license__item"> <img class="copyright-license__image" src="https://znanio.ru/build/assets/img/footer/gerb-trademark.png" alt="Изображение свидетельство правообладателя товарного знака"/> <a class="copyright-license__link" href="https://znanio.ru/docs/tm.jpg" title="Свидетельство правообладателя товарного знака" target="_blank">Свидетельство правообладателя товарного знака 11.01.2017</a> </li> </ul> </div> </footer> </div> <div class="right-bar__container"> <div class="media-material-recommendation__container"> <p class="media-material-recommendation__title">Посмотрите также</p> <ul class="media-material-recommendation__list"> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/metodicheskoe-posobie-dlya-roditelejkak-privit-rebyonku-chteniepo-proektu-po-sledam-skazok-iz-detstva-2962686" title="Методическое пособие для родителей,как привить ребёнку чтение.По проекту: По следам сказок из детства"> Методическое пособие для родителей,как привить ребёнку чтение.По проекту: По следам сказок из детства </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/mnemotehnika-kak-bystro-vyuchit-inostrannyj-yazyk-2962685" title=""Мнемотехника" как быстро выучить иностранный язык"> "Мнемотехника" как быстро выучить иностранный язык </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-po-matematike-3-klass-kontrolnaya-rabota-za-god-na-izuchennom-materiale-2962683" title="Презентация по математике. 3 класс. Контрольная работа за год на изученном материале."> Презентация по математике. 3 класс. Контрольная работа за год на изученном материале. </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/a-korobejnikov-parovozik-iz-romashkovo-partitura-dlya-orni-dshi-2962635" title="А. Коробейников "Паровозик из Ромашково" партитура для ОРНИ ДШИ"> А. Коробейников "Паровозик из Ромашково" партитура для ОРНИ ДШИ </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/komnata-muzej-afanasiya-luzhanina-avkorepanova-2962631" title="Комната-музей Афанасия Лужанина (А.В.Корепанова)"> Комната-музей Афанасия Лужанина (А.В.Корепанова) </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/dosug-sovety-doktora-ajbolita-2962616" title="Досуг «Советы доктора Айболита»"> Досуг «Советы доктора Айболита» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/samoanaliz-uroka-po-fizicheskoj-kulture-2962614" title="Самоанализ урока по физической культуре"> Самоанализ урока по физической культуре </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/rimskaya-imperiya-territoriya-upravlenie-2962613" title="Римская Империя: территория, управление."> Римская Империя: территория, управление. </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/plan-konspekt-roditelskogo-sobraniya-informatsionnaya-bezopasnost-detej-v-ispolzovanii-internet-resursov-2962608" title="План - конспект родительского собрания: «Информационная безопасность детей в использовании Интернет-ресурсов»"> План - конспект родительского собрания: «Информационная безопасность детей в использовании Интернет-ресурсов» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/partitura-dlya-orni-dshi-a-korobejnikov-parovozik-iz-romashkovo-2962607" title="партитура для ОРНИ ДШИ А. Коробейников "Паровозик из Ромашково""> партитура для ОРНИ ДШИ А. Коробейников "Паровозик из Ромашково" </a> </li> </ul> </div> <div class="right-bar-ads__container"> <div id="yandex_rtb_R-A-1580174-3"></div> </div> </div> </div> <div id="cookie-policy-notification" class="cookie-policy-notification__container"> <button class="cookie-policy-notification__close" onclick="closeCookiePolicyNotification()"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <path d="M9.854 12.725L0 22.58 1.42 24l9.855-9.854a1.003 1.003 0 011.42 0L22.58 24 24 22.58l-9.884-9.855a1.003 1.003 0 010-1.42L24 1.42 22.58 0l-9.885 9.884a1.003 1.003 0 01-1.42 0L1.42 0 0 1.42l9.854 9.885a1.003 1.003 0 010 1.42z" fill="currentColor"></path> </svg> </button> <div class="cookie-policy-notification__title">Мы используем Cookies</div> <div class="cookie-policy-notification__description"> <p>Продолжая использовать наш сайт, вы соглашаетесь с <a class="cookie-policy-notification__link" href="https://znanio.ru/docs/cookie-policy.pdf" title="Политика использования Cookies" target="_blank">политикой использования Cookies</a>. Это файлы в браузере, которые помогают нам сделать ваш опыт взаимодействия с сайтом удобнее.</p> <div class="cookie-policy-notification-option__list"> <span class="cookie-policy-notification-option__item"> <input id="cookie-required-option" type="checkbox" name="required_cookie" disabled="disabled" checked="checked"> <label class="cookie-policy-notification-option__label" for="cookie-required-option"> <b>Функциональные</b></label> </span> <span class="cookie-policy-notification-option__item"> <input id="cookie-analytics-option" type="checkbox" name="analytics_cookie" checked="checked" onclick="cookiePolicySet(COOKIE_POLICY_ANALYTICS, this)"> <label class="cookie-policy-notification-option__label" for="cookie-analytics-option"> Аналитические</label> </span> <span class="cookie-policy-notification-option__item"> <input id="cookie-marketing-option" type="checkbox" name="marketing_cookie" checked="checked" onclick="cookiePolicySet(COOKIE_POLICY_MARKETING, this)"> <label class="cookie-policy-notification-option__label" for="cookie-marketing-option"> Маркетинговые</label> </span> </div> </div> <div class="cookie-policy-notification__action"> <button class="button button--primary" onclick="applyCookiePolicy()">Принять настройки</button> </div> </div> <script type="text/javascript" src="https://znanio.ru/build/assets/js/app.min.js?v=0.5.6" async></script> <script type="text/javascript" src="https://znanio.ru/build/assets/js/external-package.min.js?v=0.5.6" async></script> <script type="text/javascript" async>(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date(); for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }} k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym"); ym(39196045, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true });</script> <noscript><div><img src="https://mc.yandex.ru/watch/39196045" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <script type="text/javascript" src="https://yandex.ru/ads/system/context.js" async></script> </body> </html>