Начиная с историй разработки сайта и продолжая ее развитием. В работе описывается все начальные теоретические описания разработки и структуры сайта в языке разработки 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>
</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-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>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/kvantovye-tehnologii-gryaduschego-dlya-10-11-klassov-2953098"
title="Квантовые технологии грядущего для 10-11 классов">
Квантовые технологии грядущего для 10-11 классов
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/prezentatsiya-k-uroku-informatiki-ustrojstva-vvoda-i-vyvoda-informatsii-2952565"
title="Презентация к уроку информатики "Устройства ввода и вывода информации"">
Презентация к уроку информатики "Устройства ввода и вывода информации"
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/prezentatsiya-2952485"
title="Презентация">
Презентация
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/prezentatsiya-o-modelyah-predstavleniya-tsveta-v-srede-informatsionno-tehnologicheskih-ustrojstv-2952245"
title="Презентация о моделях представления цвета в среде информационно-технологических устройств">
Презентация о моделях представления цвета в среде информационно-технологических устройств
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/printsipy-postroeniya-kompyutera-pokoleniya-evm-2950808"
title="Принципы построения компьютера. Поколения ЭВМ.">
Принципы построения компьютера. Поколения ЭВМ.
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/informatika-elektronnaya-tablitsa-2950621"
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.2" 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
