Основы HTML Шакиров Альмир
HTML (Hyper Text Markup Language) язык разметки гипертекста Web-страницы
Программы для создания HTML – файлов: Редакторы (HTML Wirtel, HTML Assistant, Web. Edit, Home. Site, Блокнот и т. д. ) Шаблоны Программы-преобразователи
Программы для просмотра Web - страниц Microsoft Internet Explorer Netscape Communicator The Bat! Opera и т. д.
Программы для создания HTML – файлов: Блокнот (для создания страницы) Internet Explorer (для интерпретации файлов)
Гипертекст – это разметочные теги. текст, содержащий специальные § Теги (tag – ярлык, признак) – инструкции браузера, указывающие способ отображения текста.
Пример тега Типы тегов Парные (влияет на текст с того места, где употреблён тег, до того места, где указан признак окончания его действия) Непарные
Категории тегов Структурные теги Теги символов Теги форматирования абзацев Теги оформления списков данных Теги логического форматирования текста Теги физического форматирования текста
Структура HTML документа
начинает описание HTML - файла HTML - документ состоит из двух частей: 1. Раздел заголовка 2. Содержательная часть
Раздел заголовка Начинается тегом
Заканчивается тегом Mежду данными тегами располагается тег
(этот тег используется для задания названия документа)
Раздел содержательной части Начинается тегом
Заканчивается тегом (между которыми располагается содержимое HTML - документа)
Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
Заголовок HTML – документа Это тело HTML – документа. Здесь можно разместить всё, что угодно.
Создать файл в Блокноте (сохраните в файле Пример, указав расширение *. html)
Теги символов §ТЕГИ ЛОГИЧЕСКОГО ФОРМАТИРОВАНИЯ ТЕКСТА §ТЕГИ ФИЗИЧЕСКОГО ФОРМАТИРОВАНИЯ ТЕКСТА
Теги логического форматирования текста
Теги физического форматирования текста
используется для отметки аббревиатур, акронимов (акроним – произносимое слово, состоящее из начальных букв словосочетания); используя тег
- можно указать «расшифровку» акронима, которая появляется на экране, когда курсор располагается на акрониме. </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример использования тега <ACRONYM>: <ACRONYM TITLE= «Муниципальное казённое общеобразовательное учреждение» > МКОУ </ACRONYM> «Глядянская" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-19.jpg" alt="Пример использования тега <ACRONYM>: <ACRONYM TITLE= «Муниципальное казённое общеобразовательное учреждение» > МКОУ </ACRONYM> «Глядянская" />
Пример использования тега <ACRONYM>: <ACRONYM TITLE= «Муниципальное казённое общеобразовательное учреждение» > МКОУ </ACRONYM> «Глядянская средняя общеобразовательная школа» </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример использования тега <ACRONYM>: " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-20.jpg" alt="Пример использования тега <ACRONYM>: " />
Пример использования тега <ACRONYM>: </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <FONT> позволяет изменить шрифт " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-21.jpg" alt="Тег <FONT> позволяет изменить шрифт " />
Тег <FONT> позволяет изменить шрифт </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Параметры тега <FONT> FACE (задаёт название шрифта, которым будет выводится текст) SIZE (задаёт размеры" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-22.jpg" alt="Параметры тега <FONT> FACE (задаёт название шрифта, которым будет выводится текст) SIZE (задаёт размеры" />
Параметры тега <FONT> FACE (задаёт название шрифта, которым будет выводится текст) SIZE (задаёт размеры шрифта в условных единицах от 1 до 7) COLOR (устанавливает цвет шрифта, который может задаваться с помощью стандартных имён или набором шестнадцатеричных цифр) </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-23.jpg" alt="Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах" />
Задание цвета на языке HTML Шестнадцатеричные значения (цветовая система базируется на трёх основных цветах – красном, зеленом и синем – обозначается RGB) Например: #000000, #0000 FF, #FF 0000, #FFFFFF Мнемонические обозначения (название цвета) Например: Red, White, Blue, Green </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример использования параметра Color: <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> или" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-24.jpg" alt="Пример использования параметра Color: <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> или" />
Пример использования параметра Color: <FONT COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> или <FONT COLOR=#008000> Шрифт размера 6, цвет зелёный </FONT> <BR> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Примеры использования параметров тега <FONT> : <FONT FACE=“ARIAL”> Название шрифта </FONT> <BR> <FONT SIZE=5>" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-25.jpg" alt="Примеры использования параметров тега <FONT> : <FONT FACE=“ARIAL”> Название шрифта </FONT> <BR> <FONT SIZE=5>" />
Примеры использования параметров тега <FONT> : <FONT FACE=“ARIAL”> Название шрифта </FONT> <BR> <FONT SIZE=5> Шрифт размера 5 </FONT> <BR> <FONT FACE=“ARIAL” SIZE=+3 COLOR=Green> Шрифт размера 6, цвет зелёный </FONT> <BR> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <BASEFONT> используется для указания размера, типа и цвета шрифта по умолчанию " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-26.jpg" alt="Тег <BASEFONT> используется для указания размера, типа и цвета шрифта по умолчанию " />
Тег <BASEFONT> используется для указания размера, типа и цвета шрифта по умолчанию </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Примеры использования тега <BASEFONT> : <BASEFONT FACE=“Courier” COLOR=#008080> Шрифт по умолчанию размера 3<BR> <BASEFONT" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-27.jpg" alt="Примеры использования тега <BASEFONT> : <BASEFONT FACE=“Courier” COLOR=#008080> Шрифт по умолчанию размера 3<BR> <BASEFONT" />
Примеры использования тега <BASEFONT> : <BASEFONT FACE=“Courier” COLOR=#008080> Шрифт по умолчанию размера 3<BR> <BASEFONT SIZE=2>Шрифт размера 2<BR> <BASEFONT SIZE=4 COLOR=Olive> Шрифт размера 4, цвет оливковый <BR> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример использования параметра Color c тегом <BODY>: <BODY BGCOLOR=#008080> Задание цвета фона <BR> " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-28.jpg" alt="Пример использования параметра Color c тегом <BODY>: <BODY BGCOLOR=#008080> Задание цвета фона <BR> " />
Пример использования параметра Color c тегом <BODY>: <BODY BGCOLOR=#008080> Задание цвета фона <BR> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <Р> тег «параграф» , отделяет абзац друг от друга " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-29.jpg" alt="Тег <Р> тег «параграф» , отделяет абзац друг от друга " />
Тег <Р> тег «параграф» , отделяет абзац друг от друга </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title=" Примеры использования тега <P> : <P ALIGN=LEFT> Выравнивание по левой границе окна<BR> <P" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-30.jpg" alt=" Примеры использования тега <P> : <P ALIGN=LEFT> Выравнивание по левой границе окна<BR> <P" />
Примеры использования тега <P> : <P ALIGN=LEFT> Выравнивание по левой границе окна<BR> <P ALIGN=CENTER> Выравнивание по центру окна<BR> <P ALIGN=RIGHT> Выравнивание по правой границе окна<BR> <P ALIGN=JUSTIFY> Выравнивание по ширине окна<BR> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <HR> отображение горизонтальной линии " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-31.jpg" alt="Тег <HR> отображение горизонтальной линии " />
Тег <HR> отображение горизонтальной линии </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Пример использования тега <HR> : <HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00 FF 00> " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-32.jpg" alt="Пример использования тега <HR> : <HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00 FF 00> " />
Пример использования тега <HR> : <HR ALIGN=LEFT WIDHT=20 SIZE=30 COLOR=#00 FF 00> </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Тег <H 1> для разметки заголовков (<H 1>, <H 2>, <H 3>, <H 4>," src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-33.jpg" alt="Тег <H 1> для разметки заголовков (<H 1>, <H 2>, <H 3>, <H 4>," />
Тег <H 1> для разметки заголовков (<H 1>, <H 2>, <H 3>, <H 4>, <H 5>, <H 6>) </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Вставка пробелов и специальных символов " ± ² " src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-34.jpg" alt="Вставка пробелов и специальных символов " ± ² " />
Вставка пробелов и специальных символов " ± ² </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="Список использованной литературы 1. Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным" src="https://present5.com/presentation/3/645169_437546908.pdf-img/645169_437546908.pdf-35.jpg" alt="Список использованной литературы 1. Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным" />
Список использованной литературы 1. Информатика. 7 – 9 класс. Базовый курс. Практикум по информационным технологиям /Под ред. Н. В. Макаровой. – СПб. : Питер, 2006. 2. А. А. Медведев. Основы HTML: Учебное пособие для средних учебных заведений. – Курган: Изд-во Курганского ИПКРО, 2002. 3. Изображения http: //www. xard. ru/post/18613/ </p>
</div>
<div style="width: auto;" class="description columns twelve"><p><img class="imgdescription" title="" src="" alt="" />
</p>
</div>
</div>
<div id="inputform">
<script>$("#inputform").load("https://present5.com/wp-content/plugins/report-content/inc/report-form-aj.php");
</script>
</div>
</p>
<!--end entry-content-->
</div>
</article><!-- .post -->
</section><!-- #content -->
<div class="three columns">
<div class="widget-entry">
</div>
</div>
</div>
</div>
<!-- #content-wrapper -->
<footer id="footer" style="padding: 5px 0 5px;">
<div class="container">
<div class="columns twelve">
<!--noindex-->
<!--LiveInternet counter--><script type="text/javascript"><!--
document.write("<img src='//counter.yadro.ru/hit?t26.10;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+
";"+Math.random()+
"' alt='' title='"+" ' "+
"border='0' width='1' height='1'><\/a>")
//--></script><!--/LiveInternet-->
<a href="https://slidetodoc.com/" alt="Наш международный проект SlideToDoc.com!" target="_blank"><img src="https://present5.com/SlideToDoc.png"></a> <script>
$(window).load(function() {
var owl = document.getElementsByClassName('owl-carousel owl-theme owl-loaded owl-drag')[0];
document.getElementById("owlheader").insertBefore(owl, null);
$('#owlheader').css('display', 'inline-block');
});
</script>
<script type="text/javascript">
var yaParams = {'typepage': 'parserexe3',
'author': 'parserexe3'
};
</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(32395810, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true, webvisor:true }); </script> <noscript><div><img src="https://mc.yandex.ru/watch/32395810" style="position:absolute; left:-9999px;" alt="" /></div></noscript> <!-- /Yandex.Metrika counter -->
<!--/noindex-->
<nav id="top-nav">
<ul id="menu-top" class="top-menu clearfix">
</ul> </nav>
</div>
</div><!--.container-->
</footer>
<script type='text/javascript'>
/* <![CDATA[ */
var wpcf7 = {"apiSettings":{"root":"https:\/\/present5.com\/wp-json\/contact-form-7\/v1","namespace":"contact-form-7\/v1"}};
/* ]]> */
</script>
<script type='text/javascript' src='https://present5.com/wp-content/plugins/contact-form-7/includes/js/scripts.js?ver=5.1.4'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/jquery.shuffle.js?ver=4.9.26'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/scripts.js?ver=1.13'></script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/shuffle.js?ver=4.9.26'></script>
<!--[if lt IE 9]>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/selectivizr.js?ver=1.0.2'></script>
<![endif]-->
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/notify.js?ver=1770472669'></script>
<script type='text/javascript'>
/* <![CDATA[ */
var my_ajax_object = {"ajax_url":"https:\/\/present5.com\/wp-admin\/admin-ajax.php","nonce":"33a1179831"};
/* ]]> */
</script>
<script type='text/javascript' src='https://present5.com/wp-content/themes/sampression-lite/lib/js/filer.js?ver=1770472669'></script>
</body>
</html> 
Скачать презентацию Основы HTML Шакиров Альмир HTML Hyper Text