CS_10_Grade_Lesson_10_HTML_2_Presentation

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

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

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

Иконка файла материала CS_10_Grade_Lesson_10_HTML_2_Presentation.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/a1/a5/46a8a70bc561cb90932cf0d3f2a08681bb.jpg" title="Ссылка на снимок материала: Tag The tag defines an HTML table" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/a1/a5/46a8a70bc561cb90932cf0d3f2a08681bb.jpg" alt="Tag The tag defines an HTML table" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <p style="text-align: center"><table> Tag</p><p>The <table> tag defines an HTML table.<br>An HTML table consists of the <table> element<br><table> closing tag is </table><br>An HTML table has two kinds of cells:<br>Header cells - contains header information (created with the <th> element)<br>Standard cells - contains data (created with the <td> element)</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/14/ef/5045a9a882a5371a4521239a7b73279ef8.jpg" title="Ссылка на снимок материала: Tag The tag defines a header cell in an" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/14/ef/5045a9a882a5371a4521239a7b73279ef8.jpg" alt="Tag The tag defines a header cell in an" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <p style="text-align: center"><th> Tag</p><p>The <th> tag defines a header cell in an HTML table.<br>Closing tag is </th><br>The text in <th> elements are bold and centered by default.</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/58/f2/2732af2655c6cab13d4ae025f94b713830.jpg" title="Ссылка на снимок материала: Tag The tag defines a standard cell in an" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/58/f2/2732af2655c6cab13d4ae025f94b713830.jpg" alt="Tag The tag defines a standard cell in an" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <p style="text-align: center"><td> Tag</p><p>The <td> tag defines a standard cell in an HTML table.<br>The text in <td> elements are regular and left- aligned by default<br>Closing tag is </td></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/89/b3/a19d4643de6ad9f42ddb17873c3c22f14e.jpg" title="Ссылка на снимок материала: Tag The tag defines a row in an" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/89/b3/a19d4643de6ad9f42ddb17873c3c22f14e.jpg" alt="Tag The tag defines a row in an" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <p style="text-align: center"><tr> Tag</p><p>The <tr> tag defines a row in an HTML table.<br>A <tr> element contains one or more <th> or <td> elements.<br>Closing tag is </th></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/83/45/d2c0479165cff7e04292fd593cee8a8a06.jpg" title="Ссылка на снимок материала: Skills Criteria for success The student has achieved the learning goal if" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/83/45/d2c0479165cff7e04292fd593cee8a8a06.jpg" alt="Skills Criteria for success The student has achieved the learning goal if" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <table><tr><td colspan="2"><p>know the basics of web programming and be able to compare the methods of creating websites</p></td></tr><tr><td><strong><p>Skills </p></strong></td><td><strong><p>Criteria for success</p></strong></td></tr><tr><td colspan="2"><strong><i><p style="text-align: center">The student has achieved the learning goal if</p></i></strong></td></tr><tr><td><p>Apply of knowledge</p></td><td><p>Illustrates the skill of using the tags <head>, <body>, <title>, <table>, <th>, <td>, <tr> 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 #2</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/23/0d/dea184f314ff896a3f6264460f58ef23f3.jpg" title="Ссылка на снимок материала: " target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/23/0d/dea184f314ff896a3f6264460f58ef23f3.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/cs10gradelesson10html2presentation-2586873/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/proekt-2962755" title="Проект"> Проект </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/avtomatizatsiya-zvuka-l-v-slogah-i-slovah-2962754" title="Автоматизация звука [Л] в слогах и словах"> Автоматизация звука [Л] в слогах и словах </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/viktorina-probuzhdenie-prirody-metodicheskaya-razrabotka-2962753" title="Викторина "Пробуждение природы" методическая разработка"> Викторина "Пробуждение природы" методическая разработка </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/proektnaya-rabota-problema-dobra-i-zla-v-chelovecheskoj-nature-na-primere-povesti-roberta-lyuisa-stivensona-strannaya-istoriya-doktora-dzhekila-i-mistera-hajda-2962744" title="Проектная работа Проблема добра и зла в человеческой натуре на примере повести Роберта Льюиса Стивенсона «Странная история доктора Джекила и мистера Хайда»"> Проектная работа Проблема добра и зла в человеческой натуре на примере повести Роберта Льюиса Стивенсона «Странная история доктора Джекила и мистера Хайда» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/rol-nastavnika-v-podgotovke-i-povyshenii-kvalifikatsii-molodyh-pedagogov-cherez-uchastie-v-konkursah-2962735" title="Роль наставника в подготовке и повышении квалификации молодых педагогов через участие в конкурсах"> Роль наставника в подготовке и повышении квалификации молодых педагогов через участие в конкурсах </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/effektivnoe-primenenie-v-obuchenii-sovremennyh-informatsionnyh-tehnologij-2962734" title="Эффективное применение в обучении современных информационных технологий"> Эффективное применение в обучении современных информационных технологий </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/rol-nastavnika-v-adaptatsii-molodyh-spetsialistov-v-sovremennom-obrazovanii-2962733" title="Роль наставника в адаптации молодых специалистов в современном образовании"> Роль наставника в адаптации молодых специалистов в современном образовании </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-po-russkomu-yazyku-dlya-3-klassa-temakontrolnoe-spisyvanie-s-zadaniyami-2962732" title="Презентация по русскому языку для 3 класса. Тема:"Контрольное списывание с заданиями"."> Презентация по русскому языку для 3 класса. Тема:"Контрольное списывание с заданиями". </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/inzhenerno-tehnicheskoe-osnaschenie-gostinichnyh-predpriyatij-2962730" title="Инженерно-техническое оснащение гостиничных предприятий"> Инженерно-техническое оснащение гостиничных предприятий </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/vneklassnoe-meropriyatie-po-informatike-svoya-igra-2962729" 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>