Начиная с историй разработки сайта и продолжая ее развитием. В работе описывается все начальные теоретические описания разработки и структуры сайта в языке разработки 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">
<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/sql-zaprosy-osnovnye-komandy-dlya-upravleniya-bazami-dannyh-2960932"
title="SQL-запросы: основные команды для управления базами данных">
SQL-запросы: основные команды для управления базами данных
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/gimnastika-po-professii-master-po-obrabotke-tsifrovoj-informatsii-2960059"
title="Гимнастика по профессии Мастер по обработке цифровой информации">
Гимнастика по профессии Мастер по обработке цифровой информации
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/sozdanie-interaktivnoj-knigi-2959949"
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-sistemy-schisleniya-2957924"
title="Презентация к уроку по теме Системы счисления.">
Презентация к уроку по теме Системы счисления.
</a>
</li>
<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>
</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>
HTML през.ppt
