|
Основы языка разметки гипертекста (HTML).
Создание Web-сайтов реализуется с помощью языка разметки гипертекстовых документов HTML (Hyper Text Markup Language). Технология HTML состоит в том, что в обычный текстовый документ вставляют управляющие символы (тэги) и в результате получают Web-страницу. Браузер при загрузке Web-страницы представляет ее на экране в том виде, который задается тэгами.
Некоторые тэги имеют атрибуты, определяющие свойства тэга. Атрибут — это имя свойства, которое может принимать определенные значения.
Для создания Web-страниц служат простейшие текстовые редакторы, которые не включают в создаваемый документ управляющие символы форматирования текста. В качестве такого редактора в Windows можно использовать стандартное приложение Блокнот.
HTML-код страницы помещается внутрь контейнера . Без этих тэгов браузер не в состоянии определить формат документа и правильно его интерпретировать. Web-страница разделяется на две логические части: заголовок и содержание. Заголовок Web-страницы заключается в контейнер и содержит справочную информацию о странице, которая не отображается браузером, а также название документа.
Название Web-страницы содержится в контейнере и выводится в строке заголовка браузера. Назовем нашу Web-страницу «Компьютер»:
Koмпьютер<Title><br> <br>
</HEAD><br> <br>
Основное содержание страницы помещается в контейнер <BODY></BODY>, и в него могут входить текст, графические изображения, таблицы, бегущие строки, звуковые файлы и т. д. Поместим для начала на страницу текст «Давайте знакомиться — Компьютер»:<br> <br>
<BODY><br> <br>
Давайте знакомиться — Компьютер<br> <br>
</BODY><br> <br>
С помощью HTML-тэгов определяют различные параметры форматирования текста. Заголовок страницы целесообразно выделить крупным шрифтом. Размер шрифта заголовка устанавливается тэгами от <Н1> (самый крупный) до <Нб> (самый мелкий).<br> <br>
Текст по умолчанию выравнивается по левому краю страницы. Однако заголовок обычно принято размещать по центру страницы (в данном случае — окна браузера). Сделать это нам позволяет атрибут ALIGN тэга заголовка:<br> <br>
ALIGN="center"><br> <br>
Изменить цвет заголовка, например на синий, можно с помощью тэга, задающего шрифт с атрибутом цвета:<br> <br>
<FONT COLOR="blue"><br> <br>
Заголовок целесообразно отделить от остального содержания страницы горизонтальной линией с помощью тэга <HR>.<br> <br>
В Web-сайтах могут размещаться изображения в трех графических форматах — GIF, JPG и PNG. Для вставки изображения используется тэг <IMG> с атрибутом SRС="имя файла":<br> <br>
<IMG SRC="computer .gif"><br> <br>
Пользователи иногда в целях экономии времени отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка следует выводить поясняющую надпись.<br> <br>
Для этого тэг <IMG> имеет еще один атрибут ALT, значением которого является поясняющая надпись:<br> <br>
<IMG SRC="computer .gif"><br> <br>
В результате мы получим HTML-код Web-страницы:<br> <br>
<img src="images/otv5-65.jpg"><br>
<br>
<br>
• <a href="otv-15.php">Перейти к списку вопросов »</a><br>
<table>
<tr>
<td><a href="resh-2.php">Физика</a> • <a href="resh-1.php">Математика</a> • <a href="resh-3.php">Русский
язык</a>
</td>
</tr>
</table>
<br>
<br>
<table>
<tr valign="top">
<td></td>
<td>
• <a href="otv-2.php">Биология</a><br>
• <a href="otv-3.php">География</a><br>
• <a href="otv-4.php">Геометрия</a><br>
• <a href="otv-5.php">Информатика</a><br>
• <a href="otv-6.php">История</a><br>
• <a href="otv-7.php">Литература </a><br>
• <a href="otv-8.php">ОБЖ</a><br>
• <a href="otv-9.php">Физкультура</a><br>
• <a href="otv-10.php">Физика</a><br>
• <a href="otv-11.php">Химия</a></td>
<td>
• <a href="otv-12.php">Биология</a><br>
• <a href="otv-13.php">География</a><br>
• <a href="otv-14.php">Геометрия</a><br>
• <a href="otv-15.php">Информатика</a><br>
• <a href="otv-16.php">История</a><br>
• <a href="otv-17.php">Литература</a><br>
• <a href="otv-18.php">ОБЖ</a><br>
• <a href="otv-19.php">Обществознание</a><br>
• <a href="otv-20.php">Русский язык</a><br>
• <a href="otv-21.php">Физкультура</a><br>
• <a href="otv-22.php">Физика</a><br>
• <a href="otv-23.php">Химия</a></td>
</tr>
</table>
</div>
</article>
</div>
<div class="col-md-4">
<aside id="secondary" class="widget-area">
<section id="block-3" class="widget widget_block"><h4>Закажи дипломную, курсовую, реферат через ВКонтакте</h4>
<br>
<br>
<!-- Put this div tag to the place, where the Group block will be -->
<div id="vk_groups"></div>
<script type="text/javascript">
VK.Widgets.Group("vk_groups", {mode: 4, wide: 1, height: 400, color1: "FFFFFF", color2: "000000", color3: "5181B8"}, 209814955);
</script>
<!-- Yandex.RTB R-A-636060-2 -->
<div id="yandex_rtb_R-A-636060-2"></div>
<script>
window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
"blockId": "R-A-636060-2",
"renderTo": "yandex_rtb_R-A-636060-2"
})
})
</script>
</section></aside><!-- #secondary -->
</div>
</div>
</div>
</main><!-- #main -->
</section><!-- #primary -->
<script src='/wp-content/themes/hera/assets/bootstrap/js/bootstrap.min.js?ver=5484' id='bootstrap-js'></script>
<script src='/wp-content/themes/hera/assets/js/modernizr-2.8.3.min.js?ver=5484' id='modernizr-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.nav.js?ver=5484' id='nav-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.slicknav.js?ver=5484' id='jquery-slicknav-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.stellar.min.js?ver=5484' id='jquery-stellar-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.inview.min.js?ver=5484' id='jquery-inview-js'></script>
<script src='/wp-content/themes/hera/assets/owlcarousel/js/owl.carousel.min.js?ver=5484' id='owl-carousel-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.mixitup.js?ver=5484' id='jquery-mixitup-js'></script>
<script src='/wp-content/themes/hera/assets/js/venobox.min.js?ver=5484' id='venobox-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.magnific-popup.min.js?ver=5484' id='magnific-popup-js'></script>
<script src='/wp-content/themes/hera/assets/js/jquery.appear.js?ver=5484' id='appear-js'></script>
<script src='/wp-content/themes/hera/assets/js/slick.js?ver=5484' id='slick-js'></script>
<script src='/wp-content/themes/hera/assets/js/wow.min.js?ver=5484' id='wow-js'></script>
<script src='/wp-content/themes/hera/assets/js/scripts.js?ver=5484' id='hera-scripts-js'></script>
<script src='/wp-content/themes/hera/assets/js/scrolltopcontrol.js?ver=5484' id='scrolltopcontrol-js'></script>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-sm-12 text-center wow zoomIn">
<div class="footer_content copyright_text">
<p>
Copyright © 2023. All rights Reserved.
</p>
</div>
</div><!--- END COL -->
</div><!--- END ROW -->
</div><!--- END CONTAINER -->
</footer>
<!-- END FOOTER -->
<!-- Yandex.Metrika counter -->
<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();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(4976686, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/4976686" style="position:absolute; left:-9999px;" alt="" /></div></noscript>
<!-- /Yandex.Metrika counter -->
<script src="//code.jivo.ru/widget/SJcRVelprK" async></script>
<!-- Bothelp.io widget -->
<script type="text/javascript">!function(){var e={"token":"+79202357777","position":"left","bottomSpacing":"","callToActionMessage":"Заказать диплом, курсовую онлайн","displayOn":"everywhere","subtitle":"Описание или время работы","message":{"name":"Заказать диплом или реферат","content":"Здравствуйте, ч могу вам помочь с дипломной, курсовой или другой работой? Пишите"}},t=document.location.protocol+"//bothelp.io",o=document.createElement("script");o.type="text/javascript",o.async=!0,o.src=t+"/widget-folder/widget-whatsapp-chat.js",o.onload=function(){BhWidgetWhatsappChat.init(e)};var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(o,n)}();</script>
<!-- /Bothelp.io widget -->
</body>
</html>
|
