Презентация по Информатике на тему: Основы HTML
Основы HTML Ученик 11 А класса КГУ ОШ №61Бондарев Виталий HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы Программы для создания HTML – файлов: Редакторы (HTML Wirtel, HTML Assistant, WebEdit, HomeSite, Блокнот и т.д.)ШаблоныПрограммы-преобразователи Программы для просмотра Web - страниц Microsoft Internet ExplorerNetscape CommunicatorThe Bat!Opera и т.д. Блокнот (для создания страницы) Internet Explorer (для интерпретации файлов) Программы для создания HTML – файлов: Гипертекст – это текст, содержащий специальные разметочные теги. Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста. Пример тега
(этот тег используется для задания названия документа) Раздел содержательной части Начинается тегом Заканчивается тегом (между которыми располагается содержимоеHTML - документа) Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
Заголовок HTML – документа Это тело HTML – документа. Здесь можно разместить всё, что угодно. Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html) Теги символов Теги логического форматирования текстаТеги физического форматирования текста Теги логического форматирования текста
Теги физического форматирования текста
используется для отметки аббревиатур, акронимов (акроним – произносимое слово, состоящее из начальных букв словосочетания); используя тег
- можно указать «расшифровку» акронима, которая появляется на экране, когда курсор располагается на акрониме. Пример использования тега <ACRONYM>: <ACRONYM TITLE=«Муниципальное казённое общеобразовательное учреждение»> МКОУ </ACRONYM> «Глядянская средняя общеобразовательная школа» Пример использования тега <ACRONYM>: Тег <FONT> позволяет изменить шрифт Параметры тега <FONT> FACE (задаёт название шрифта, которым будет выводится текст)SIZE (задаёт размеры шрифта в условных единицах от 1 до 7)COLOR (устанавливает цвет шрифта, который может задаваться с помощью стандартных имён или набором шестнадцатеричных цифр) Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB)Например: #000000, #0000FF, #FF0000, #FFFFFFМнемонические обозначения (название цвета)Например: Red, White, Blue, Green Пример использования параметра Color: <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR>или<FONT COLOR=#008000> Шрифт размера 6, цвет зелёный </FONT> <BR> Примеры использования параметров тега <FONT> : <FONT FACE=“ARIAL”> Название шрифта </FONT> <BR><FONT SIZE=5> Шрифт размера 5 </FONT> <BR><FONT FACE=“ARIAL” SIZE=+3 COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> Тег <BASEFONT> используется для указания размера, типа и цвета шрифта по умолчанию Примеры использования тега <BASEFONT> : <BASEFONT FACE=“Courier” COLOR=#008080> Шрифт по умолчанию размера 3<BR><BASEFONT SIZE=2>Шрифт размера 2<BR><BASEFONT SIZE=4 COLOR=Olive> Шрифт размера 4, цвет оливковый <BR> Пример использования параметра Color c тегом <BODY>: <BODY BGCOLOR=#008080> Задание цвета фона <BR> тег «параграф», отделяет абзац друг от друга Тег <Р> Примеры использования тега <P> : <P ALIGN=LEFT> Выравнивание по левой границе окна<BR><P ALIGN=CENTER> Выравнивание по центру окна<BR><P ALIGN=RIGHT> Выравнивание по правой границе окна<BR><P ALIGN=JUSTIFY> Выравнивание по ширине окна<BR> Тег <HR> отображение горизонтальной линии Пример использования тега <HR> : <HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00FF00>
Тег <H1> для разметки заголовков (<H1>,<H2>,<H3>, <H4>, <H5>, <H6>) Вставка пробелов и специальных символов
"
±
² Список использованной литературы Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным технологиям /Под ред. Н.В.Макаровой. – СПб.: Питер, 2006.А.А. Медведев. Основы HTML: Учебное пособие для средних учебных заведений. – Курган: Изд-во Курганского ИПКРО, 2002.
</p>
</div>
<div class="clearfix"></div>
</div><!-- .col-md-8 -->
<div class="col-md-4">
<div id="secondary" class="widget-area" role="complementary">
<aside id="search-2" class="blog-widget widget widget_search"><form role="search" method="get" id="search" style="float:none;" action="/">
<input type="search" class="col-md-9 search-field" placeholder="Search here …" value="" name="s" title="Search for:">
<input type="submit" class="col-md-3 search-submit" value="">
</form>
</aside>
<aside id="recent-posts-2" class="blog-widget widget widget_recent_entries">
<h4>Закажи дипломную, курсовую, реферат через ВКонтакте</h4> <!-- 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>
</aside><aside id="archives-2" class="blog-widget widget widget_archive">
<!-- Yandex.RTB R-A-636063-2 -->
<div id="yandex_rtb_R-A-636063-2"></div>
<script>
window.yaContextCb.push(()=>{
Ya.Context.AdvManager.render({
"blockId": "R-A-636063-2",
"renderTo": "yandex_rtb_R-A-636063-2"
})
})
</script>
</aside>
</div><!-- #secondary -->
</div><!-- .col-md-4 -->
</div><!-- .row -->
</div>
<!-- FOOTER BEGIN
================================================== -->
<div class="beforefooter text-center"></div>
<footer id="colophon" class="site-footer " role="contentinfo">
<div class="text-center wraptotop">
<a class="totop"><i class="fa fa-chevron-up"></i></a>
</div>
<div class="footer">
<div class="container">
<div class="row">
</div>
</div>
</div>
<div class="footerbottom">
<div class="container">
<div class="row">
<!-- left -->
<div class="col-md-6">
</div>
<!-- right -->
<div class="col-md-6 smallspacetop">
<div class="pull-right smaller">
<ul id="menu-%d1%84%d1%83%d1%82%d0%b5%d1%80" class="footermenu"><li id="menu-item-14" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-14"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok1/">urok1</a></li>
<li id="menu-item-15" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok2/">urok2</a></li>
<li id="menu-item-16" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-16"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok3/">urok3</a></li>
<li id="menu-item-17" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-17"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok4/">urok4</a></li>
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-18"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok5/">urok5</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok6/">urok6</a></li>
<li id="menu-item-20" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-20"><a title=" " target="_blank" rel="noopener" href="http://lib-5.ru/urok7/">urok7</a></li>
<li id="menu-item-672" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-672"><a target="_blank" rel="noopener" href="http://lib-5.ru/freereferat/">freereferat</a></li>
<li id="menu-item-673" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-673"><a target="_blank" rel="noopener" href="http://lib-5.ru/ref12/">ref12</a></li>
</ul> </div>
<div class="clearfix">
</div>
</div>
<!-- end right -->
</div>
</div>
</div>
</footer>
<!-- FOOTER END
================================================== -->
</div>
<script type='text/javascript' src='/wp-content/themes/biscayalite/js/bootstrap.js?ver=3.3.5' id='wow-bootstrapjs-js'></script>
<script type='text/javascript' src='/wp-content/themes/biscayalite/js/jquery.easing.1.3.js?ver=6.1.4' id='wow-easingjs-js'></script>
<script type='text/javascript' src='/wp-content/themes/biscayalite/js/common.js?ver=6.1.4' id='wow-commonjs-js'></script>
<script type='text/javascript' src='/wp-content/plugins/q2w3-fixed-widget/js/q2w3-fixed-widget.min.js?ver=5.1.5' id='q2w3_fixed_widget-js'></script>
<script type='text/javascript' src='/wp-content/themes/biscayalite/js/isotope.js?ver=6.1.4' id='wow-isotopejs-js'></script>
<!-- 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();
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(31342598, "init", {
clickmap:true,
trackLinks:true,
accurateTrackBounce:true
});
</script>
<noscript><div><img src="https://mc.yandex.ru/watch/31342598" 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>