HTML+css. Основы

Презентации учебные
ppt
21.04.2020

Публикация в СМИ для учителей

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

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

26. Л_HTML+css. Основы.ppt

HTML+css. Основы

Веб-дизайн и вёрстка

1. Знакомьтесь: HTML

HTML - HyperText Markup Language – язык гипертекстовой разметки.
В отличие от языков программирования (в т.ч. скриптовых), которые использует алгоритмы для выполнения функций,язык разметки использует теги для «программирования» контента.

Это параграф

Веб-дизайн сегодня

HTML: структураCSS: оформлениеJavaScript: поведение

PHP и прочие: серверная частьCMS: управление контентом

основы HTML разметки

Годы идут - основы HTML остаются.
В HTML открывающиеи закрывающие теги.

Какое расширение?

Tэг </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/9e/5b/d39882f68a6901b4bf5e0e33553e0eef6b.jpg" title="Ссылка на снимок материала: Элемент Ваш текст - параграф (абзац) - перевод на новую строку без начала нового абзаца -" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/9e/5b/d39882f68a6901b4bf5e0e33553e0eef6b.jpg" alt="Элемент Ваш текст - параграф (абзац) - перевод на новую строку без начала нового абзаца -" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Элемент <p></p></strong><p><strong><p></strong>Ваш текст<strong></p> </strong>- параграф (абзац)<br><strong><br /> </strong>- перевод на новую строку без начала нового абзаца<br><strong><hr /> </strong>- Горизонтальная линия<br><strong><!–</strong> Комментагии в html <strong>--></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/34/64/a015af1cb80df6f6dde5d9000c8c971d9a.jpg" title="Ссылка на снимок материала: Элементы форматирования" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/34/64/a015af1cb80df6f6dde5d9000c8c971d9a.jpg" alt="Элементы форматирования" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Элементы форматирования</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/c9/c9/2aa86db7ccca1938a4ffa5b5d3c48b96ed.jpg" title="Ссылка на снимок материала: Элементы форматирования" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/c9/c9/2aa86db7ccca1938a4ffa5b5d3c48b96ed.jpg" alt="Элементы форматирования" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Элементы форматирования</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/23/8b/801aa827596d9a1ccf0521e78f346f33c0.jpg" title="Ссылка на снимок материала: HTML-заголовки" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/23/8b/801aa827596d9a1ccf0521e78f346f33c0.jpg" alt="HTML-заголовки" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">HTML-заголовки</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/e8/4c/7c627e01d84fd0846bf9f9a3649fc7a6bc.jpg" title="Ссылка на снимок материала: Элементы … … - разделы страницы «ДИВная вёрстка»" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/e8/4c/7c627e01d84fd0846bf9f9a3649fc7a6bc.jpg" alt="Элементы … … - разделы страницы «ДИВная вёрстка»" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Элементы <div>… </div></p></strong><p style="text-align: center"><strong><div>… </div></strong> - разделы страницы</p><strong><p style="text-align: center">«ДИВная вёрстка»</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/ae/72/115743e0d99cfe80775ad5245f9586d643.jpg" title="Ссылка на снимок материала: Основные элементы. Задание" target="_blank"> <img class="media-material-detail-body-presentation-image__snapshot" src="https://fs.znanio.ru/d5af0e/ae/72/115743e0d99cfe80775ad5245f9586d643.jpg" alt="Основные элементы. Задание" loading="lazy" /> </a> </div> <div class="media-material-detail-body-presentation-text__container"> <strong><p style="text-align: center">Основные элементы. Задание</p></strong> </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/htmlcss-osnovy-2546512/download" method="post" target="_blank"> <input name="email" placeholder="Введите ваш E-mail"/> <div class="media-material-detail-download-button__container"> <button class="button button--primary media-material-download__js" type="submit">Скачать</button> </div> </form> <button class="button button--default move-up__js">Вверх</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" title="Сведения об организации">Сведения об организации</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/o.pdf" title="Договор-оферта">Договор-оферта</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/p" title="Проверка документов">Проверка документов</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Обратная связь">Обратная связь</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Рекламодателям">Рекламодателям</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/docs/tmp/report_violation.html" title="Сообщить о нарушении">Сообщить о нарушении</a> </li> <li class="copyright-about__item"> <a class="copyright-about__link" href="https://znanio.ru/about" title="Центр поддержки">Центр поддержки</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" target="_blank" title="Вконтакте">Вконтакте</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://ok.ru/znanioru" target="_blank" title="Одноклассники">Одноклассники</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://www.facebook.com/znanioru" target="_blank" title="Фейсбук">Фейсбук</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://instagram.com/znanioru" target="_blank" title="Инстаграм">Инстаграм</a> </li> <li class="copyright-social__item"> <a class="copyright-social__link" href="https://www.youtube.com/channel/UCcKrjMPh-3ZwjCi_UQTNHXg" target="_blank" title="Ютьюб">Ютьюб</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" target="_blank" title="Образовательная лицензия">Образовательная лицензия №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-smi.png" alt="Изображение свидетельство СМИ"/> <a class="copyright-license__link" href="https://znanio.ru/docs/smi.png" target="_blank" title="Запись в реестре зарегистрированных СМИ">Запись в реестре зарегистрированных СМИ ЭЛ №ФС77-77478 от 25.12.2019</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" target="_blank" title="Свидетельство правообладателя товарного знака">Свидетельство правообладателя товарного знака 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/osnovy-aerokosmicheskogo-obrazovaniya-tseli-i-preimuschestva-vnedreniya-bas-v-uchebnyj-protsess-2956411" title="Основы аэрокосмического образования: цели и преимущества внедрения БАС в учебный процесс"> Основы аэрокосмического образования: цели и преимущества внедрения БАС в учебный процесс </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-k-uroku-po-teme-chislennoe-modelirovanie-v-elektronnyh-tablitsah-2956263" title="Презентация к уроку по теме «Численное моделирование в электронных таблицах»"> Презентация к уроку по теме «Численное моделирование в электронных таблицах» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-k-uroku-po-teme-chislennoe-modelirovanie-v-elektronnyh-tablitsah-2956261" title="Презентация к уроку по теме «Численное моделирование в электронных таблицах»"> Презентация к уроку по теме «Численное моделирование в электронных таблицах» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-k-uroku-po-teme-chislennoe-modelirovanie-v-elektronnyh-tablitsah-2956260" title="Презентация к уроку по теме «Численное моделирование в электронных таблицах»"> Презентация к уроку по теме «Численное моделирование в электронных таблицах» </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/1-sistemy-schisleniya-teoriya-2955667" title="1. Системы счисления. Теория."> 1. Системы счисления. Теория. </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/adresatsiya-v-seti-internet-reshenie-zadach-2955666" title="Адресация в сети Интернет. Решение задач."> Адресация в сети Интернет. Решение задач. </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-k-zanyatiyu-po-informatike-v-1-klasse-po-teme-zakonomernosti-2955356" title="Презентация к занятию по информатике в 1 классе по теме "Закономерности""> Презентация к занятию по информатике в 1 классе по теме "Закономерности" </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/kak-podruzhitsya-s-nejrosetyu-i-sdelat-ee-svoim-pomoschnikom-pri-podgotovke-k-vypolneniyu-vpr-2954915" title="Как подружиться с нейросетью и сделать ее своим помощником при подготовке к выполнению ВПР."> Как подружиться с нейросетью и сделать ее своим помощником при подготовке к выполнению ВПР. </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/prezentatsiya-open-office-draw-sozdanie-3d-obektov-2954406" title="Презентация "Open Office Draw. Создание 3D объектов""> Презентация "Open Office Draw. Создание 3D объектов" </a> </li> <li class="media-material-recommendation__item"> <a class="media-material-recommendation__link" href="https://znanio.ru/media/uchimsya-rabotat-s-tekstovymi-dokumentami-2954128" title="Учимся работать с текстовыми документами"> Учимся работать с текстовыми документами </a> </li> </ul> </div> <div class="right-bar-ads__container"> <div id="yandex_rtb_R-A-1580174-3"></div> </div> </div> </div> <script type="text/javascript" src="https://znanio.ru/build/assets/js/app.min.js?v=0.3.3" 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>