Начиная с историй разработки сайта и продолжая ее развитием. В работе описывается все начальные теоретические описания разработки и структуры сайта в языке разработки HTML. Описываются понятие такие как: теги, боди, хед. Полностью показывается как должен быть написан сайт и его формат.
Задачи урока
Сформировать представление о
языке HTML
Познакомиться с понятиями: тег,
верстка, разметка.
Что это?
Hyper
Text
Markup
HTML (от англ. HyperText
Markup Language — язык
разметки гипертекста) —
стандартный язык разметки
документов во Всемирной
паутине.
Language
Язык HTML был разработан британским
учёным Тимом БернерсомЛи в конце 80х
годов 20 века в рамках создания проекта
распределенной гипертекстовой системы,
которую он назвал World Wide Web (WWW)
или Всемирная паутина.
Вёрстка — это термин первоначально
появившийся в типографской среде, и
определяется как процесс создания
страниц путём компонования элементов,
как текстовых так и графических.
На сегодняшний день под вёрсткой
может подразумеваться как
типографская вёрстка, так и
компьютерная вёрстка страниц для
создания интернетсайтов.
Документы HTML
являются обычными текстовыми
файлами, содержащими специальные
теги (или управляющие элементы)
разметки.
имеют расширения htm или html.
их можно создавать при помощи
любого текстового редактора. (чаще
всего используется Блокнот)
Язык HTML интерпретируется браузерами и
отображается в виде документа, в удобной для
человека форме.
Так браузер отображает для нас
Таким браузер «видит» исходный код
Структура HTML страницы
невидимая часть страницы (Заголовок,
Метатеги, Подключение стилей, Java
script )
видимая часть страницы, в которой
расположены непосредственно элементы
веб страницы: абзацы, таблицы рисунки.
Тег
Тег является контейнером,
который заключает в себе все
содержимое вебстраницы, включая теги
и . Документ начинается
тегом и заканчивается
Тег < head >
Тег предназначен для
хранения элементов, цель которых —
помочь браузеру в работе с данными.
Содержимое тега не
отображается напрямую на веб
странице, за исключением тега
</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/methodology/images/2a/82/2a8246e235d76140f23e4c6251672cf57ddfa2cd.jpg"
title="Ссылка на снимок материала: "
target="_blank">
<img class="media-material-detail-body-presentation-image__snapshot"
src="https://fs.znanio.ru/methodology/images/2a/82/2a8246e235d76140f23e4c6251672cf57ddfa2cd.jpg"
alt=""
loading="lazy" />
</a>
</div>
<div class="media-material-detail-body-presentation-text__container">
Тег <title>
Определяет заголовок документа. Элемент
<title> не является частью документа и не
показывается напрямую на вебстранице.
Допускается использовать только один тег
<title> на документ и размещать его в
контейнере <head>.
</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/methodology/images/76/57/765761b95da42b7c18679fed54253b925874ebb0.jpg"
title="Ссылка на снимок материала: "
target="_blank">
<img class="media-material-detail-body-presentation-image__snapshot"
src="https://fs.znanio.ru/methodology/images/76/57/765761b95da42b7c18679fed54253b925874ebb0.jpg"
alt=""
loading="lazy" />
</a>
</div>
<div class="media-material-detail-body-presentation-text__container">
Тег <body>
Тег <body> предназначен для хранения
содержания вебстраницы (контента),
отображаемого в окне браузера. Информацию,
которую следует выводить в документе,
следует располагать именно внутри
контейнера <body>.
</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/methodology/images/0b/cd/0bcd5ef63bdc6dcf5c03bebb8939994141b3319a.jpg"
title="Ссылка на снимок материала: "
target="_blank">
<img class="media-material-detail-body-presentation-image__snapshot"
src="https://fs.znanio.ru/methodology/images/0b/cd/0bcd5ef63bdc6dcf5c03bebb8939994141b3319a.jpg"
alt=""
loading="lazy" />
</a>
</div>
<div class="media-material-detail-body-presentation-text__container">
Контрольные вопросы
Определение HTML
История HTML
Понятие веpстки
Разcширение HTML документов
Теги <html>,<body>,<title>
</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/html_sreda_razrabotki_sajta-91569/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>
<li class="copyright-social__item">
<a class="copyright-social__link" href="https://zen.yandex.ru/znanio" 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/prezentatsiya-avtomatizirovannoe-rabochee-mesto-spetsialista-2947679"
title="Презентация "Автоматизированное рабочее место специалиста"">
Презентация "Автоматизированное рабочее место специалиста"
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/prezentatsiya-k-uroku-po-distsipline-op-10-informatsionnye-tehnologii-v-professionalnoj-deyatelnosti-k-razdelu-avtomatizirovannaya-obrabotka-informatsii-dlya-studentov-po-spetsialnosti-spo-350216-ekspluatatsiya-i-remont-selskohozyajstvennoj-teh-2947207"
title="Презентация к уроку по дисциплине ОП 10 «Информационные технологии в профессиональной деятельности» к разделу «Автоматизированная обработка информации» для студентов по специальности СПО: 35.02.16 Эксплуатация и ремонт сельскохозяйственной техники и оборудования.">
Презентация к уроку по дисциплине ОП 10 «Информационные технологии в профессиональной деятельности» к разделу «Автоматизированная обработка информации» для студентов по специальности СПО: 35.02.16 Эксплуатация и ремонт сельскохозяйственной техники и оборудования.
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/artpedagogika-prezentatsiya-pedagogicheskogo-opyta-integratsii-v-obrazovatelnyj-protsess-2946491"
title="Артпедагогика. Презентация педагогического опыта интеграции в образовательный процесс">
Артпедагогика. Презентация педагогического опыта интеграции в образовательный процесс
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/elektronnaya-pochta-2945306"
title="Электронная почта">
Электронная почта
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/tipy-web-stranits-klassifikatsiya-web-sajtov-2945304"
title="Типы web-страниц Классификация web-сайтов">
Типы web-страниц Классификация web-сайтов
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/pravila-obscheniya-po-elpochte-2945303"
title="Правила общения по эл.почте">
Правила общения по эл.почте
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/osnovy-bezopasnogo-ispolzovaniya-interneta-2945302"
title="Основы безопасного использования интернета">
Основы безопасного использования интернета
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/istoriya-vozniknoveniya-elektronnoj-pochty-2945301"
title="История возникновения электронной почты">
История возникновения электронной почты
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/etiket-obscheniya-v-seti-internet-2945300"
title="Этикет общения в сети интернет.">
Этикет общения в сети интернет.
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/bezopasnost-pri-rabote-s-elektronnoj-pochtoj-i-v-sotsialnyh-setyah-2945299"
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.0" 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>
HTML през.ppt
