CS_10_Grade_Lesson_10_HTML_1_Presentation

ppt
09.05.2020

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

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

Добавить материал

CS_10_Grade_Lesson_10_HTML_1_Presentation.ppt

HTML

Learning objective
10.4.2.1
use HTML tags when developing webpages

What
Website
Web server
Web address
Web page
...
is?

Basic concepts

Web server - is a computer on the Internet that stores Web pages and related software for working with them.

Basic concepts

Web page – the main document used in the World Wide Web WWW. This is a combined document that can contain text, pictures, tables, diagrams, animated images.
Website – a collection of several Web pages, united by one theme. collection of several Web pages, united by one theme.

Basic concepts

WWW (World Wide Web) – an Internet system designed to hyperlink the files stored on the network to computers around the world.

Basic concepts

Hypertext – an electronic document that contains links to other documents.
Hyperlink – communication between various components of information.
Hypertext, together with the links embedded in it, forms Hypersensitive.

Basic concepts

Web pages are created using special rules, and rules are defined using the HTML markup language.
Web pages are viewed by special programs– Browsers.
The most popular browsers: Internet Explorer, Google Chrome, Mozilla Firefox Opera, etc.

How it works

1
2
3
4
1
3
2
4
2 1
5
4 3
WWW
index.html
HTML
PHP
CGI
ASP
...
HTML

Web server

jpg, gif, swf,
avi, mpg …

Video HTML

https://www.youtube.com/watch?v=CKlh1lwe2rY

Tag The basic concept of HTML is the concept of a tag

Tag

The basic concept of HTML is the concept of a tag.
Tag – a browser instruction indicating the way information is displayed.

Task for group work (work in pairs):

Handout # 1
Using search services, study the materials of the global network:

<br><h#><br><p><br><br><br></p></strong><strong><p><hr><br><u><br><b><br><i><br><bgcolor><br><font></p></strong><strong><p>Consider the main tags on the Internet, write down the syntax and description:</p></strong> </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/59/7236bd55fd921eaaab4ed702bae60d4833.jpg" title="Ссылка на снимок материала: Structure of the HTML document" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/fc/59/7236bd55fd921eaaab4ed702bae60d4833.jpg" alt="Structure of the HTML document" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Structure of the HTML document</p></strong><strong><p><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd"><br><br><html><br><br> <head><br><br></strong><strong> </strong> Here is the service information. The user does not see it.<strong><br></strong><strong><br> </head><br> <body> <br><br></strong><strong> </strong>Here is the content of the document. <br> This is what the user sees.<strong><br></strong><strong> </body><br></html> </strong></p><p style="text-align: center">Start of document</p><p style="text-align: center">End of document</p><p style="text-align: center">Start heading</p><p style="text-align: center">End of heading</p><p style="text-align: center">Beginning of the body of the document</p><p style="text-align: center">End of document body</p><p style="text-align: center">Definition of document type</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/98/8c/3951d0cafc68e96507f6cf6d3882fe0fd9.jpg" title="Ссылка на снимок материала: Body of the document ... Service information" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/98/8c/3951d0cafc68e96507f6cf6d3882fe0fd9.jpg" alt="Body of the document ... Service information" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Body of the document</p></strong><strong><p><html><br><br> <head><br> ... Service information... <br> </head><br> <body> <br> <h1>My first HTML document</h1> <hr> <br> <p>Some text. The main content of the current page. First paragraph <br> <p>The second paragraph. To format text use different elements of the HTML language.</p> <!–- paragraph --><br> </body><br></html> </p></strong><strong><p style="text-align: center">A comment</p></strong> </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/68/ce/f534379f27e8c1c78b143b06623eb37909.jpg" title="Ссылка на снимок материала: Task for individual work: Creating a web-page using tags that were learned" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/68/ce/f534379f27e8c1c78b143b06623eb37909.jpg" alt="Task for individual work: Creating a web-page using tags that were learned" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Task for individual work:<br></strong><br><strong>Creating a web-page using tags that were learned. </strong></p><table><tr><td colspan="3"><p>Know the basics of web programming and be able to compare the methods of creating websites</p></td></tr><tr><td colspan="2"><strong><p>Skills </p></strong></td><td><strong><p>Criteria for success</p></strong></td></tr><tr><td colspan="3"><strong><i><p>The student has achieved the learning goal if</p></i></strong></td></tr><tr><td rowspan="3"><p>Apply of knowledge</p></td><td colspan="2"><p>Illustrates the skill of using the tags <head>, <body>, <title>, when creating your own web page</p></td></tr><tr><td colspan="2"><p>Illustrates the skill of inserting an image on your own web page</p></td></tr><tr><td colspan="2"><p>Demonstrates at least ten html tags</p></td></tr></table> </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/64/43/368183442388a62aa27fa71438744f3c67.jpg" title="Ссылка на снимок материала: " target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/64/43/368183442388a62aa27fa71438744f3c67.jpg" alt="" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> </div> </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/cs10gradelesson10html1presentation-2586866/download" method="post" target="_blank"> <div class="media-material-detail-download__operation"> <div class="media-material-detail-info__container"> <p>Скачивание материала доступно только для авторизованных пользователей.</p> </div> </div> </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.ru/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.youtube.com/channel/UCcKrjMPh-3ZwjCi_UQTNHXg" title="Youtube" target="_blank">Youtube</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/stsenarij-roditelskogo-sobraniya-vmeste-k-uspehu-stroim-uchebnyj-god-vmeste-2985025" title="Сценарий родительского собрания «Вместе к успеху: строим учебный год вместе»"> Сценарий родительского собрания «Вместе к успеху: строим учебный год вместе» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/ekranizatsii-klassicheskih-proizvedenij-v-uchebnom-protsesse-vozmozhnosti-i-riski-dlya-studentov-srednego-professionalnogo-obrazovaniya-2985024" title="Экранизации классических произведений в учебном процессе: возможности и риски для студентов среднего профессионального образования"> Экранизации классических произведений в учебном процессе: возможности и риски для студентов среднего профессионального образования </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/naglyadnyj-demonstratsionnyj-material-po-teme-mebel-2985023" title="Наглядный демонстрационный материал по теме "Мебель""> Наглядный демонстрационный материал по теме "Мебель" </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/blan-informatsii-o-roditelyah-v-dou-2985021" title="Блан информации о родителях в ДОУ"> Блан информации о родителях в ДОУ </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/klassnyj-chas-tvori-dobro-drugim-vo-blago-2985019" title="Классный час "Твори добро другим во благо...""> Классный час "Твори добро другим во благо..." </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/trenirovochnaya-rabota-po-nemetskomu-yazyku-dlya-7-klassa-po-teme-sklonenie-prilagatelnyh-2985018" title="Тренировочная работа по немецкому языку для 7 класса по теме «Склонение прилагательных»."> Тренировочная работа по немецкому языку для 7 класса по теме «Склонение прилагательных». </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/shkolnyj-tur-olimpiady-po-nemetskomu-yazyku-2985017" title="Школьный тур олимпиады по немецкому языку"> Школьный тур олимпиады по немецкому языку </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/kartochki-schitaj-i-prohodi-labirint-2985016" title="Карточки "Считай и проходи лабиринт""> Карточки "Считай и проходи лабиринт" </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/kartochki-najdi-vernoe-reshenie-2985015" title="Карточки "Найди верное решение""> Карточки "Найди верное решение" </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/seminar-dlya-roditelej-vospitannikov-yaselnoj-gruppy-znayuschij-roditel-legkaya-adaptatsiya-2985013" title="Семинар для родителей воспитанников ясельной группы "Знающий родитель - легкая адаптация""> Семинар для родителей воспитанников ясельной группы "Знающий родитель - легкая адаптация" </a> </li> </ul> </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.6.3" async></script> <script type="text/javascript" src="https://znanio.ru/build/assets/js/external-package.min.js?v=0.6.3" async></script>  <script type="text/javascript"> (function(e, x, pe, r, i, me, nt){ e[i]=e[i]||function(){(e[i].a=e[i].a||[]).push(arguments)}, me=x.createElement(pe),me.async=1,me.src=r,nt=x.getElementsByTagName(pe)[0],me.addEventListener('error',function(){function cb(t){t=t[t.length-1],'function'==typeof t&&t({flags:{}})};Array.isArray(e[i].a)&&e[i].a.forEach(cb);e[i]=function(){cb(arguments)}}),nt.parentNode.insertBefore(me,nt)}) (window, document, 'script', 'https://abt.s3.yandex.net/expjs/latest/exp.js', 'ymab'); </script>  <script type="text/javascript">(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>