Вёрстка — это термин первоначально
появившийся в типографской среде, и
определяется как процесс создания
страниц путём компонования элементов,
как текстовых так и графических.
На сегодняшний день под вёрсткой
может подразумеваться как
типографская вёрстка, так и
компьютерная вёрстка страниц для
создания интернетсайтов.
Структура 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.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/obrabotka-informatsii-2971102"
title="Обработка информации">
Обработка информации
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/derevoperebor-variantov-s-pomoschyu-dereva-2970995"
title="Дерево.Перебор вариантов с помощью дерева">
Дерево.Перебор вариантов с помощью дерева
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/modeli-i-modelirovaniya-2970546"
title="МОДЕЛИ И МОДЕЛИРОВАНИЯ">
МОДЕЛИ И МОДЕЛИРОВАНИЯ
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/informatsiya-i-informatsionnye-protsessy-2970545"
title="ИНФОРМАЦИЯ И ИНФОРМАЦИОННЫЕ ПРОЦЕССЫ">
ИНФОРМАЦИЯ И ИНФОРМАЦИОННЫЕ ПРОЦЕССЫ
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/logicheskie-elementy-2970544"
title="Логические элементы">
Логические элементы
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/oblachnye-tehnologii-ispolzovanie-onlajn-ofisa-dlya-razrabotki-dokumentov-2970118"
title="ОБЛАЧНЫЕ ТЕХНОЛОГИИ. ИСПОЛЬЗОВАНИЕ ОНЛАЙН-ОФИСА ДЛЯ РАЗРАБОТКИ ДОКУМЕНТОВ">
ОБЛАЧНЫЕ ТЕХНОЛОГИИ. ИСПОЛЬЗОВАНИЕ ОНЛАЙН-ОФИСА ДЛЯ РАЗРАБОТКИ ДОКУМЕНТОВ
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/sovremennye-vozmozhnosti-v-internet-prostranstve-2970117"
title="Современные возможности в Интернет-пространстве.">
Современные возможности в Интернет-пространстве.
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/arhivatsiya-dannyh-ispolzovanie-programm-arhivatorov-2970115"
title="Архивация данных. Использование программ-архиваторов">
Архивация данных. Использование программ-архиваторов
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/novye-knigi-po-matematike-i-informatike-dlya-nachalnoj-shkoly-i-ne-tolko-2969977"
title="Новые Книги по МАТЕМАТИКЕ и ИНФОРМАТИКЕ для начальной школы (и не только)">
Новые Книги по МАТЕМАТИКЕ и ИНФОРМАТИКЕ для начальной школы (и не только)
</a>
</li>
<li class="media-material-recommendation__item">
<a class="media-material-recommendation__link"
href="https://znanio.ru/media/tablichnye-modeli-2968433"
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.6.1" async></script>
<script type="text/javascript" src="https://znanio.ru/build/assets/js/external-package.min.js?v=0.6.1" async></script>
<!-- Varioqub -->
<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>
<!-- Yandex.Metrika -->
<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>
HTML през.ppt
