KNOWLEDGE HYPERMARKET


Презентація до теми: Язык разметки гипертекста
Строка 7: Строка 7:
Тема '''«[[Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.|Язык разметки гипертекста]]»'''.  
Тема '''«[[Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.|Язык разметки гипертекста]]»'''.  
 +
<br>
 +
<br>
 +
'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА'''<br><br>'''Часть1.''' Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; HTML-теги'''<br><br>HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.<br>Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте. <br>'''&lt;TAG&gt;...&lt;/TAG&gt;'''
 +
<br>Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает. <br>'''&lt;TAG ATTRIBUTE&gt;...&lt;/TAG&gt;'''
-
ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА<br><br>Часть1. Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.<br><br>HTML-теги<br><br>HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.<br>Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте. <br>&lt;TAG&gt;...&lt;/TAG&gt;�<br>Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает. <br>&lt;TAG ATTRIBUTE&gt;...&lt;/TAG&gt;�<br>Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать. <br>&lt;TAG ATTRIBUTE="..."&gt;...&lt;/TAG&gt;<br><br>Всегда обращайте внимание на порядок �расположения тегов: <br><br>Верно: <br>&lt;A&gt;&lt;B&gt;&lt;/B&gt;&lt;/A&gt;<br><br>Неверно: <br>&lt;A&gt;&lt;B&gt;&lt;/A&gt;&lt;/B&gt;<br><br>Структура HTML-документа<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;простое название&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>содержание страницы<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>карт<br><br>Параметры документа<br><br>Параметры документа задаются через тег &lt;BODY&gt;. <br>Параметры – это специальные символьные команды, которые «понимает» браузер.<br><br>Атрибуты тега BODY&nbsp;&nbsp; &nbsp;<br>bgcolor &nbsp;&nbsp; &nbsp;цвет фона задан по схеме RGB (Красный Зеленый Синий), �6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий) <br>background&nbsp;&nbsp; &nbsp;фон - графический файл <br>text&nbsp;&nbsp; &nbsp;цвет текста <br>link&nbsp;&nbsp; &nbsp;цвет ссылки <br>alink&nbsp;&nbsp; &nbsp;цвет активной ссылки <br>vlink&nbsp;&nbsp; &nbsp;цвет посещенной ссылки <br><br>Параметры документа: пример<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Заглавие документа&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080"&gt;<br>Это наш пример!!!<br>&lt;/body&gt;<br>&lt;/HTML&gt; <br><br>Индексирование документы<br><br>HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. �Эти параметры обозначены в META-тегах.<br><br>Атрибуты тега META&nbsp;&nbsp; &nbsp;<br>description&nbsp;&nbsp; &nbsp;описание документа<br>keywords&nbsp;&nbsp; &nbsp;ключевые слова, разделенные запятыми<br><br>Кодировка страницы<br><br>Для здания кодировки используется тег META, �стоящий в теге HEAD. �Атрибуты тега для задания кодировок: <br><br>http-equiv&nbsp;&nbsp; &nbsp;content&nbsp;&nbsp; &nbsp;кодировка<br>Content-Type&nbsp;&nbsp; &nbsp;text/html; charset=windows-1251&nbsp;&nbsp; &nbsp;Кириллица Windows<br>Content-Type&nbsp;&nbsp; &nbsp;text/html; charset=KOI8-R&nbsp;&nbsp; &nbsp;Кириллица KOI8-R<br>Content-Type&nbsp;&nbsp; &nbsp;text/html; charset=iso-8859-5&nbsp;&nbsp; &nbsp;Кириллица ISO<br>другие кодировки...<br><br>&lt;HTML&gt;<br>&lt;head&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина"&gt;<br>&lt;META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html"&gt;<br>&lt;TITLE&gt;Заглавие документа&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>Вася<br>&lt;br&gt;<br>Содержание документа: автоматически отображается на Кириллице!<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>Заголовки<br><br>В HTML существуют специальные теги для заголовков: �от Н1 (самого крупного) до Н6 (самого мелкого):<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;H1&gt; Заголовок 1&lt;/H1&gt;<br>&lt;H2&gt; Заголовок 2&lt;/H2&gt;<br>&lt;H3&gt; Заголовок 3&lt;/H3&gt;<br>&lt;H4&gt; Заголовок 4&lt;/H4&gt;<br>&lt;H5&gt; Заголовок 5&lt;/H5&gt;<br>&lt;H6&gt; Заголовок 6&lt;/H6&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>Стили текста<br><br>&lt;B&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Bold&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;жирный<br>&lt;I&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Italic&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;наклонный<br>&lt;U&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Underline &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;подчеркнутый<br>&lt;S&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Strikethrough &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;зачеркнутый<br><br><br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;B&gt; Bold&lt;/B&gt; &lt;br&gt;<br>&lt;I&gt; Italic &lt;/I&gt;&lt;br&gt;<br>&lt;U&gt; Underline &lt;/U&gt;&lt;br&gt;<br>&lt;S&gt; Strikethrough &lt;/S&gt;&lt;br&gt;<br>&lt;B&gt;&lt;I&gt; Bold &amp; Italic &lt;/I&gt;&lt;/B&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML<br><br>Шрифт<br><br>Атрибуты тега FONT&nbsp;&nbsp; &nbsp;<br>Face&nbsp;&nbsp; &nbsp;имена шрифтов, разделенные запятыми<br>Size&nbsp;&nbsp; &nbsp;размер от 1 до 7 (по умолчанию 3)<br>Color&nbsp;&nbsp; &nbsp;цвет шрифта<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green"&gt;<br>Цвет, размер и шрифт выбраны.&lt;/FONT&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>Предварительное форматирование<br><br>Неразрывный пробел – &amp;nbsp; (non-breaking space). �Перенос строки – &lt;br&gt; �Размещение текста в том виде, в котором он представлен – �&lt;PRE&gt;... &lt;/PRE&gt;<br><br>Пример: <br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;PRE&gt;<br>Предварительное&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; форматирование текста<br>&nbsp; //&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; *&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //<br>&lt;/PRE&gt; &lt;br&gt;<br>Mitsubishi Galant &lt;br&gt;<br>Mitsubishi Galant. <br>&lt;P&gt; Начало нового абзаца!<br>&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>Верхние и нижние индексы<br><br>Верхний индекс - тег SUP, а нижний - SUB. ��&lt;HTML&gt;<br>&lt;BODY&gt;<br>X&lt;SUP&gt;3&lt;/SUP&gt;<br>&lt;br&gt;<br>A&lt;SUB&gt;3&lt;/SUB&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>Выравнивание<br><br>Тег нового абзаца &lt;P&gt;<br><br>Атрибут тега &lt;P&gt;&nbsp;&nbsp; &nbsp;<br>ALIGN&nbsp;&nbsp; &nbsp;ВЫРАВНИВАНИЕ<br>left&nbsp;&nbsp; &nbsp;по левой границе<br>center&nbsp;&nbsp; &nbsp;по центру<br>right&nbsp;&nbsp; &nbsp;по правой границе<br>justify&nbsp;&nbsp; &nbsp;по ширине<br><br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;p align=center&gt;Значение CENTER - центрирование&lt;/p&gt;<br>&lt;p align=right&gt;Значение RIGHT - выравнивание по правому краю.&lt;/p&gt;<br>&lt;p align=left&gt;Значение LEFT - выравнивание по левому краю&lt;/p&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>Графика на Web-страницах<br><br>На Web-страницах возможно размещать графическую информацию. <br>Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG. <br><br>Формат&nbsp;&nbsp; &nbsp;Диапазон цветов&nbsp;&nbsp; &nbsp;Прозрачность&nbsp;&nbsp; &nbsp;Анимация<br>GIF&nbsp;&nbsp; &nbsp;от 2 до 256&nbsp;&nbsp; &nbsp;Да&nbsp;&nbsp; &nbsp;Да<br>JPEG&nbsp;&nbsp; &nbsp;16 милионов или 256 оттенков (Grayscale)&nbsp;&nbsp; &nbsp;Нет&nbsp;&nbsp; &nbsp;Нет<br><br>Для публикаций изображений используется тег IMG: <br><br>Атрибуты тега IMG&nbsp;&nbsp; &nbsp;<br>SRC&nbsp;&nbsp; &nbsp;имя графического файла и путь до него<br>WIDTH&nbsp;&nbsp; &nbsp;ширина изображения в пикселах<br>HEIGHT&nbsp;&nbsp; &nbsp;высота изображения в пикселах<br>BORDER&nbsp;&nbsp; &nbsp;ширина рамки вокруг изображения в пиксели<br>ALT&nbsp;&nbsp; &nbsp;альтернативный текст изображения<br>ALIGN&nbsp;&nbsp; &nbsp;расположение на экране: Left - слева, Right – справа<br><br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right"&gt; <br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>Графика на Web-страницах: пример<br><br>карт<br><br>&lt;IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1 �ALT=“Веселая картинка"&gt; <br>Картинку можно разместить справа от текста...<br><br>карт<br><br>&lt;img src=ie.gif align="LEFT"&gt; <br>&lt;img src=ie2.gif align="RIGHT"&gt; <br>Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...<br><br>карт<br><br>карт<br><br>&lt;IMG SRC=PALMA.JPG ALIGN="LEFT" <br>HSPACE=30 VSPACE=30&gt;<br><br>Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее. <br>Реализуются с помощью тега A. <br><br>Атрибуты тега A&nbsp;&nbsp; &nbsp;<br>href &nbsp;&nbsp; &nbsp;Имя и путь к странице<br>Интернет-адрес с именем протокола: http://�Ссылка отправления письма на e-mail: mailto:�Переход на ссылку внутри документа # <br>target&nbsp;&nbsp; &nbsp;имя окна, в которое отправит ссылка:�_blank - открывает ссылку в новом окно браузера�_top - окно стоящее поверх остальных�_parent - открывает ссылку в родительском окне (по умолчанию) <br>name&nbsp;&nbsp; &nbsp;имя ссылки в документе<br><br>Ссылки на Web-страницах<br><br>Ссылка в пределах одного сайта:&nbsp;&nbsp; &nbsp;&lt;A HREF=menu/1.htm&gt;Заходите в гости!&lt;/А&gt;�<br>Ссылка на ресурс Интернет:&nbsp;&nbsp; &nbsp;&lt;A HREF=http://gimn6.krsk.info target="_blank"&gt;Ссылка на сайт гимназии 6 &lt;/А&gt;�<br>Ссылка на ресурс Интернет:<br>&nbsp;&nbsp; &nbsp;&lt;A HREF= http://www.mysite.ru/html/example.html&gt;�Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML&lt;/A&gt;�<br>Ссылка на адрес электронной почты:&nbsp;&nbsp; &nbsp;&lt;A HREF="mailto:vlata@hotbox.ru"&gt; Присылайте письма!&lt;/A&gt;�<br><br>Ссылка на метку внутри данного документа:&nbsp;&nbsp; &nbsp;&lt;A HREF="#mesto"&gt;Переход по метке&lt;/A&gt; – �переход к строке этого же документа, помеченной �&lt;A NAME="mesto"&gt;�<br>Картинка-ссылка&nbsp;&nbsp; &nbsp;&lt;A HREF=example.html&gt;&lt;img src=example.gif width=100 height=100 border=0&gt;&lt;/A&gt;<br>&lt;A HREF=example2.gif&gt;&lt;img src=example.gif width=100 height=100 border=0&gt;&lt;/A&gt;�<br>Ссылка на произвольный файл:&nbsp;&nbsp; &nbsp;&lt;A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт"&gt;Скачать программу&lt;/А&gt;�<br><br>Абсолютные ссылки:&nbsp;&nbsp; &nbsp;&lt;A HREF= http://www.mysite.ru/html/example.html&gt; �Текст является ссылкой на документ example.html на сайте www.mysite.ru в папке HTML�&lt;/A&gt;<br>Относительные ссылки:<br>&nbsp;&nbsp; &nbsp;&lt;A HREF=/html/example.html&gt;�Ссылка на файл example.html лежащий в папке HTML сайта�&lt;/A&gt;<br>Относительные ссылки:<br>&nbsp;&nbsp; &nbsp;&lt;A HREF=../example.html&gt;�&lt;img src=images/example.gif width=100 height=100 border=0&gt;�&lt;/A&gt;<br><br>Списки на Web-страницах<br><br>карт<br><br>карт<br><br>карт<br><br>карт<br><br>Список с несколькими �уровнями вложенности:<br><br><br>&lt;OL&gt;<br>&nbsp;&nbsp;&nbsp; &lt;LI&gt;форматирование текста&lt;/LI&gt; <br>&lt;UL&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;LI&gt;жирность; &lt;/LI&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;LI&gt;наклон; &lt;/LI&gt;<br>&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;LI&gt;цвет &lt;/LI&gt;<br>&nbsp;&nbsp; &nbsp;&lt;/UL&gt;<br>&nbsp;&nbsp;&nbsp; &lt;LI&gt;работа с абзацами &lt;/LI&gt;<br>&lt;/OL&gt;<br><br><br>Списки с графическими маркерами<br><br>Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах: �www.grapholina.com/Grafics и www.theshockzone.com <br><br>карт<br><br>Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG: <br>&lt;BR&gt;&lt;img src="spisok.gif" align="middle"&gt;Раз�<br>Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:<br>&lt;BR&gt;&lt;img src="spisok.gif" HSPACE="10"&gt;Раз<br><br>'''Перейти до презентації можна клікнувши на текст "[http://school.xvatit.com/Presentation/Kuratory/Isupov/2_prezent_8kl_t11_inf_1.ppt Презентація]" і встановивши Microsoft PowerPoint '''<br> <br>
+
<br>Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать. <br>'''&lt;TAG ATTRIBUTE="..."&gt;...&lt;/TAG&gt;'''<br><br>Всегда обращайте внимание на порядок расположения тегов: <br><br>Верно: <br>'''&lt;A&gt;&lt;B&gt;&lt;/B&gt;&lt;/A&gt;'''<br><br>Неверно: <br>'''&lt;A&gt;&lt;B&gt;&lt;/A&gt;&lt;/B&gt;'''<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Структура HTML-документа'''<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;простое название&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>содержание страницы<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>[[Image:29.06-6.jpg]]<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры документа'''
 +
 
 +
 
 +
 
 +
Параметры документа задаются через тег &lt;BODY&gt;. <br>Параметры – это специальные символьные команды, которые «понимает» браузер.
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 592px; height: 139px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибуты тега BODY&nbsp;&nbsp;&nbsp; <br>
 +
|-
 +
| &nbsp; bgcolor
 +
| &nbsp;&nbsp;&nbsp;&nbsp; цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий)
 +
|-
 +
| &nbsp;background
 +
| &nbsp;&nbsp;&nbsp; фон - графический файл
 +
|-
 +
| &nbsp; text
 +
| &nbsp;&nbsp;&nbsp; цвет текста
 +
|-
 +
| &nbsp; link <br>
 +
| &nbsp;&nbsp; цвет ссылки
 +
|-
 +
| &nbsp; alink
 +
| &nbsp;&nbsp; цвет активной ссылки
 +
|-
 +
| &nbsp; vlink
 +
| &nbsp;&nbsp;&nbsp; цвет посещенной ссылки
 +
|}
 +
 
 +
<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Параметры документа: пример'''<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;TITLE&gt;Заглавие документа&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080"&gt;<br>Это наш пример!!!<br>&lt;/body&gt;<br>&lt;/HTML&gt; <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Индексирование документы'''<br><br>HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах.
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 382px; height: 61px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибуты тега META&nbsp;&nbsp;
 +
|-
 +
| &nbsp; description
 +
| &nbsp;&nbsp;&nbsp; описание документа
 +
|-
 +
| &nbsp; keywords <br>
 +
| &nbsp;&nbsp; ключевые слова, разделенные запятыми
 +
|}
 +
 
 +
<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Кодировка страницы'''<br><br>Для здания кодировки используется тег META,
 +
 
 +
стоящий в теге HEAD.
 +
 
 +
Атрибуты тега для задания кодировок:
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 602px; height: 100px;"
 +
|-
 +
| &nbsp; http-equiv <br>
 +
| &nbsp;&nbsp; content
 +
| &nbsp;&nbsp;&nbsp; кодировка
 +
|-
 +
| &nbsp; Content-Type <br>
 +
| &nbsp;&nbsp; text/html; charset=windows-1251
 +
| &nbsp;&nbsp;&nbsp; Кириллица Windows
 +
|-
 +
| &nbsp; Content-Type <br>
 +
| &nbsp;&nbsp; text/html; charset=KOI8-R
 +
| &nbsp;&nbsp;&nbsp; Кириллица KOI8-R
 +
|-
 +
| &nbsp; Content-Type
 +
| &nbsp;&nbsp;&nbsp; text/html; charset=iso-8859-5
 +
| &nbsp;&nbsp;&nbsp; Кириллица ISO
 +
|-
 +
| colspan="3" | &nbsp; другие кодировки...<br>
 +
|}
 +
 
 +
<br>&lt;HTML&gt;<br>&lt;head&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина"&gt;<br>&lt;META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html"&gt;<br>&lt;TITLE&gt;Заглавие документа&lt;/TITLE&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>Вася<br>&lt;br&gt;<br>Содержание документа: автоматически отображается на Кириллице!<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Заголовки'''<br><br>В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого):<br><br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;H1&gt; Заголовок 1&lt;/H1&gt;<br>&lt;H2&gt; Заголовок 2&lt;/H2&gt;<br>&lt;H3&gt; Заголовок 3&lt;/H3&gt;<br>&lt;H4&gt; Заголовок 4&lt;/H4&gt;<br>&lt;H5&gt; Заголовок 5&lt;/H5&gt;<br>&lt;H6&gt; Заголовок 6&lt;/H6&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Стили текста'''<br><br>&lt;B&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Bold&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; жирный<br>&lt;I&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp; Italic&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; наклонный<br>&lt;U&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Underline &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; подчеркнутый<br>&lt;S&gt;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;Strikethrough &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;зачеркнутый<br><br><br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;B&gt; Bold&lt;/B&gt; &lt;br&gt;<br>&lt;I&gt; Italic &lt;/I&gt;&lt;br&gt;<br>&lt;U&gt; Underline &lt;/U&gt;&lt;br&gt;<br>&lt;S&gt; Strikethrough &lt;/S&gt;&lt;br&gt;<br>&lt;B&gt;&lt;I&gt; Bold &amp; Italic &lt;/I&gt;&lt;/B&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Шрифт'''
 +
 
 +
 
 +
 
 +
Шрифт задаётся тегом FONT. <br>&nbsp;
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 411px; height: 81px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибуты тега FONT&nbsp;&nbsp;
 +
|-
 +
| &nbsp; Face <br>
 +
| &nbsp;&nbsp; имена шрифтов, разделенные запятыми
 +
|-
 +
| &nbsp; Size
 +
| &nbsp;&nbsp;&nbsp; размер от 1 до 7 (по умолчанию 3)
 +
|-
 +
| &nbsp; Color
 +
| &nbsp;&nbsp;&nbsp; цвет шрифта
 +
|}
 +
 
 +
<br>&lt;HTML&gt;<br>&lt;HEAD&gt;<br>&lt;META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251"&gt;<br>&lt;/HEAD&gt;<br>&lt;BODY&gt;<br>&lt;FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green"&gt;<br>Цвет, размер и шрифт выбраны.&lt;/FONT&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Предварительное форматирование'''<br><br>Неразрывный пробел – &amp;nbsp; (non-breaking space).
 +
 
 +
Перенос строки – &lt;br&gt;
 +
 
 +
Размещение текста в том виде, в котором он представлен –
 +
 
 +
&lt;PRE&gt;... &lt;/PRE&gt;<br><br>Пример: <br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;PRE&gt;<br>Предварительное&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; форматирование текста<br>&nbsp; //&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; *&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; //<br>&lt;/PRE&gt; &lt;br&gt;<br>Mitsubishi Galant &lt;br&gt;<br>Mitsubishi Galant. <br>&lt;P&gt; Начало нового абзаца!<br>&lt;/P&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt;<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Верхние и нижние индексы'''<br><br>Верхний индекс - тег SUP, а нижний - SUB.
 +
 
 +
&lt;HTML&gt;<br>&lt;BODY&gt;<br>X&lt;SUP&gt;3&lt;/SUP&gt;<br>&lt;br&gt;<br>A&lt;SUB&gt;3&lt;/SUB&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Выравнивание'''<br><br>Тег нового абзаца &lt;P&gt;
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 473px; height: 120px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибут тега &lt;P&gt;&nbsp;&nbsp;&nbsp; <br>
 +
|-
 +
| &nbsp; ALIGN
 +
| &nbsp;&nbsp;&nbsp; ВЫРАВНИВАНИЕ
 +
|-
 +
| &nbsp; left <br>
 +
| &nbsp;&nbsp; по левой границе
 +
|-
 +
| &nbsp; center
 +
| &nbsp;&nbsp;&nbsp; по центру
 +
|-
 +
| &nbsp; right
 +
| &nbsp;&nbsp;&nbsp; по правой границе
 +
|-
 +
| &nbsp; justify <br>
 +
| &nbsp;&nbsp; по ширине
 +
|}
 +
 
 +
<br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;p align=center&gt;Значение CENTER - центрирование&lt;/p&gt;<br>&lt;p align=right&gt;Значение RIGHT - выравнивание по правому краю.&lt;/p&gt;<br>&lt;p align=left&gt;Значение LEFT - выравнивание по левому краю&lt;/p&gt;<br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Графика на Web-страницах'''<br><br>На Web-страницах возможно размещать графическую информацию. <br>Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG.
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 556px; height: 61px;"
 +
|-
 +
| &nbsp; Формат
 +
| &nbsp;&nbsp;&nbsp; Диапазон цветов
 +
|
 +
Прозрачность
 +
&nbsp;&nbsp; <br>
 +
| &nbsp;&nbsp;&nbsp; Анимация
 +
|-
 +
| &nbsp; GIF
 +
| &nbsp;&nbsp;&nbsp; от 2 до 256
 +
| &nbsp;&nbsp;&nbsp; Да
 +
| &nbsp;&nbsp;&nbsp; Да
 +
|-
 +
| &nbsp; JPEG
 +
| &nbsp;&nbsp;&nbsp; 16 милионов или 256 оттенков (Grayscale)
 +
| &nbsp;&nbsp;&nbsp; Нет
 +
| &nbsp;&nbsp;&nbsp; Нет
 +
|}
 +
<br>
 +
Для публикаций изображений используется тег IMG:
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 578px; height: 139px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибуты тега IMG&nbsp;&nbsp;&nbsp; <br>
 +
|-
 +
| &nbsp; SRC
 +
| &nbsp;&nbsp;&nbsp; имя графического файла и путь до него
 +
|-
 +
| &nbsp; WIDTH&nbsp; <br>
 +
| &nbsp;&nbsp; ширина изображения в пикселах
 +
|-
 +
| &nbsp; HEIGHT
 +
| &nbsp;&nbsp;&nbsp; высота изображения в пикселах
 +
|-
 +
| &nbsp; BORDER
 +
| &nbsp;&nbsp;&nbsp; ширина рамки вокруг изображения в пиксели
 +
|-
 +
| &nbsp; ALT
 +
| &nbsp;&nbsp;&nbsp; альтернативный текст изображения
 +
|-
 +
| &nbsp; ALIGN
 +
| &nbsp;&nbsp;&nbsp; расположение на экране: Left - слева, Right – справа
 +
|}
 +
 
 +
<br>&lt;HTML&gt;<br>&lt;BODY&gt;<br>&lt;IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right"&gt; <br>&lt;/BODY&gt;<br>&lt;/HTML&gt; <br><br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Графика на Web-страницах: пример'''<br><br>[[Image:29.06-7.jpg]]<br><br>&lt;IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1
 +
 
 +
ALT=“Веселая картинка"&gt; <br>Картинку можно разместить справа от текста...
 +
 
 +
<br>[[Image:29.06-8.jpg]]<br><br>&lt;img src=ie.gif align="LEFT"&gt; <br>&lt;img src=ie2.gif align="RIGHT"&gt; <br>Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...<br><br>[[Image:29.06-9.jpg]]<br><br>[[Image:29.06-10.jpg]]<br><br>&lt;IMG SRC=PALMA.JPG ALIGN="LEFT" <br>HSPACE=30 VSPACE=30&gt;<br><br>Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее. <br>Реализуются с помощью тега A.
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 577px; height: 81px;"
 +
|-
 +
| colspan="2" | &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Атрибуты тега A&nbsp;&nbsp;&nbsp; <br>
 +
|-
 +
| &nbsp;&nbsp; href
 +
|
 +
&nbsp;Имя и путь к странице
 +
 
 +
&nbsp;Интернет-адрес с именем протокола: http://<br>
 +
 
 +
&nbsp;Ссылка отправления письма на e-mail: mailto:<br>
 +
&nbsp; Переход на ссылку внутри документа #
 +
|-
 +
| &nbsp; target
 +
| &nbsp;&nbsp;&nbsp; имя окна, в которое отправит ссылка:<br>
 +
_blank - открывает ссылку в новом окно браузера<br>
 +
 
 +
_top - окно стоящее поверх остальных<br>
 +
_parent - открывает ссылку в родительском окне (по умолчанию)
 +
|-
 +
| &nbsp; name
 +
| &nbsp;&nbsp;&nbsp; имя ссылки в документе
 +
|}
 +
 
 +
<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Ссылки на Web-страницах'''
 +
 
 +
 
 +
 
 +
{| cellspacing="1" cellpadding="1" border="1" style="width: 584px; height: 81px;"
 +
|-
 +
| &nbsp; Ссылка в пределах одного сайта:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF=menu/1.htm&gt;Заходите в гости!&lt;/А&gt;
 +
|-
 +
| &nbsp; Ссылка на ресурс Интернет:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF=http://gimn6.krsk.info target="_blank"&gt;Ссылка на сайт гимназии 6 &lt;/А&gt;
 +
|-
 +
| &nbsp; Ссылка на ресурс Интернет:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF= <br>
 +
&nbsp;&nbsp;&nbsp; http://www.mysite.ru/html/example.html&gt;<br>
 +
 
 +
&nbsp;&nbsp;&nbsp; Текст является ссылкой на документ <br>
 +
&nbsp;&nbsp;&nbsp;&nbsp; example.html на сайте www.mysite.ru в папке HTML&lt;/A&gt;
 +
|-
 +
| &nbsp; Ссылка на адрес электронной почты:
 +
| <br>&nbsp;&nbsp;&nbsp; &lt;A HREF="mailto:vlata@hotbox.ru"&gt; Присылайте письма!&lt;/A&gt;
 +
|-
 +
| &nbsp; Ссылка на метку внутри данного документа:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF="#mesto"&gt;Переход по метке&lt;/A&gt; – <br>
 +
&nbsp;&nbsp;&nbsp; переход к строке этого же документа, <br>
 +
 
 +
&nbsp;&nbsp;&nbsp; помеченной <br>
 +
 
 +
&nbsp;&nbsp;&nbsp; &lt;A NAME="mesto"&gt;<br>
 +
 
 +
|-
 +
| &nbsp; Картинка-ссылка <br>
 +
| &nbsp;&nbsp; &lt;A HREF=example.html&gt;&lt;img src=example.gif <br>
 +
&nbsp;&nbsp;&nbsp; width=100 height=100 border=0&gt;&lt;/A&gt;<br>&nbsp;&nbsp;&nbsp; &lt;A HREF=example2.gif&gt;&lt;img src=example.gif&nbsp; <br>
 +
&nbsp;&nbsp;&nbsp; width=100 height=100 border=0&gt;&lt;/A&gt;
 +
|-
 +
| &nbsp; Ссылка на произвольный файл: <br>
 +
| <br>&nbsp;&nbsp; &lt;A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт"&gt;Скачать программу&lt;/А&gt;
 +
|-
 +
| &nbsp; Абсолютные ссылки:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF= http://www.mysite.ru/html/example.html&gt; <br>
 +
&nbsp;&nbsp;&nbsp;&nbsp; Текст является ссылкой на документ example.html <br>
 +
 
 +
&nbsp;&nbsp;&nbsp;&nbsp; на сайте www.mysite.ru в папке HTML<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/A&gt;
 +
|-
 +
| &nbsp; Относительные ссылки:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF=/html/example.html&gt;<br>
 +
&nbsp;&nbsp;&nbsp; Ссылка на файл example.html лежащий в папке HTML сайта<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/A&gt;
 +
|-
 +
| &nbsp; Относительные ссылки:
 +
| &nbsp;&nbsp;&nbsp; &lt;A HREF=../example.html&gt;<br>
 +
&nbsp;&nbsp;&nbsp; &lt;img src=images/example.gif width=100 height=100 border=0&gt;<br>
 +
&nbsp;&nbsp;&nbsp;&nbsp; &lt;/A&gt;
 +
|}
 +
 
 +
<br>'''&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Списки на Web-страницах'''<br><br>[[Image:29.06-11.jpg]]<br><br>[[Image:29.06-12.jpg]]<br><br>[[Image:29.06-13.jpg]]<br><br>[[Image:29.06-14.jpg]]<br>'''<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Списки с графическими маркерами'''<br><br>Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах:
 +
 
 +
www.grapholina.com/Grafics и www.theshockzone.com <br><br>[[Image:29.06-15.jpg]]<br><br>Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG: <br>'''&lt;BR&gt;&lt;img src="spisok.gif" align="middle"&gt;Раз'''<br>Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:<br>'''&lt;BR&gt;&lt;img src="spisok.gif" HSPACE="10"&gt;Раз'''<br><br>'''Перейти до презентації можна клікнувши на текст "[http://school.xvatit.com/Presentation/Kuratory/Isupov/2_prezent_8kl_t11_inf_1.ppt Презентація]" і встановивши Microsoft PowerPoint '''<br> <br>
Надіслано вчителем інформатики Ісуповим С. Л.  
Надіслано вчителем інформатики Ісуповим С. Л.  

Версия 11:19, 20 июля 2011

Гіпермаркет Знань>>Інформатика >>Інформатика 8 клас>> Інформатика:Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали.

Презентація до предмету Інформатика 8 клас.

Тема «Язык разметки гипертекста».



                                                    ЯЗЫК РАЗМЕТКИ ГИПЕРТЕКСТА

Часть1. Структура и параметры html-документа. Форматирование текста. Графика на Web-страницах. Ссылки. Маркеры.

                                                                         HTML-теги

HTML-тег напоминает переключатель, с помощью которого вы что-то включаете или выключаете в вашем браузере.
Теги могут быть написаны заглавными и строчными буквами. Наиболее мудро в тегах использовать заглавные буквы, чтобы они выделялись в тексте.
<TAG>...</TAG>


Теги, в основном, используются попарно. Открывающий тег включает, закрывающий тег выключает.
<TAG ATTRIBUTE>...</TAG>


Иногда теги имеют один или несколько атрибутов. Атрибуты предоставляют дополнительную информацию для браузера. Тег говорит браузеру ЧТО делать, а атрибут говорит КАК это делать.
<TAG ATTRIBUTE="...">...</TAG>

Всегда обращайте внимание на порядок расположения тегов:

Верно:
<A><B></B></A>

Неверно:
<A><B></A></B>

                                           Структура HTML-документа

<HTML>
<HEAD>
<TITLE>простое название</TITLE>
</HEAD>
<BODY>
содержание страницы
</BODY>
</HTML>

29.06-6.jpg

                                           Параметры документа


Параметры документа задаются через тег <BODY>.
Параметры – это специальные символьные команды, которые «понимает» браузер.


                                                   Атрибуты тега BODY   
  bgcolor      цвет фона задан по схеме RGB (Красный Зеленый Синий), 6-разрядное шестнадцатеричное число (#RRGGBB) или имя цвета (например red - Красный, green - Зеленый, blue - Синий)
 background     фон - графический файл
  text     цвет текста
  link
   цвет ссылки
  alink    цвет активной ссылки
  vlink     цвет посещенной ссылки


                                       Параметры документа: пример

<HTML>
<HEAD>
<TITLE>Заглавие документа</TITLE>
</HEAD>
<body bgcolor="#fee8e0" text="black" link="#0000ff" alink="#ff0000" vlink="#000080">
Это наш пример!!!
</body>
</HTML>

                                            Индексирование документы

HTML-документы могут содержать набор ключевых слов и других вспомогательных параметров, такие как заглавие, описание сайта, авторство для индексирования и лучшего нахождения поисковыми системами страницы. Эти параметры обозначены в META-тегах.


                                     Атрибуты тега META  
  description     описание документа
  keywords
   ключевые слова, разделенные запятыми


                                                       Кодировка страницы

Для здания кодировки используется тег META,

стоящий в теге HEAD.

Атрибуты тега для задания кодировок:


  http-equiv
   content     кодировка
  Content-Type
   text/html; charset=windows-1251     Кириллица Windows
  Content-Type
   text/html; charset=KOI8-R     Кириллица KOI8-R
  Content-Type     text/html; charset=iso-8859-5     Кириллица ISO
  другие кодировки...


<HTML>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
<META NAME="DESCRIPTION" CONTENT="Домашняя страница Васи Пупкина">
<META NАМЕ="keywords" CONTENT="Пупкин, дизайн, htm, html">
<TITLE>Заглавие документа</TITLE>
</HEAD>
<BODY>
Вася
<br>
Содержание документа: автоматически отображается на Кириллице!
</BODY>
</HTML>

                                                       Заголовки

В HTML существуют специальные теги для заголовков: от Н1 (самого крупного) до Н6 (самого мелкого):

<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<H1> Заголовок 1</H1>
<H2> Заголовок 2</H2>
<H3> Заголовок 3</H3>
<H4> Заголовок 4</H4>
<H5> Заголовок 5</H5>
<H6> Заголовок 6</H6>
</BODY>
</HTML>

                                                     Стили текста


<B>        Bold                         жирный
<I>          Italic                        наклонный
<U>        Underline                 подчеркнутый
<S>        Strikethrough          зачеркнутый


<HTML>
<BODY>
<B> Bold</B> <br>
<I> Italic </I><br>
<U> Underline </U><br>
<S> Strikethrough </S><br>
<B><I> Bold & Italic </I></B>
</BODY>
</HTML

                                                          Шрифт


Шрифт задаётся тегом FONT.
 

                         
                             Атрибуты тега FONT  
  Face
   имена шрифтов, разделенные запятыми
  Size     размер от 1 до 7 (по умолчанию 3)
  Color     цвет шрифта


<HTML>
<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=Windows-1251">
</HEAD>
<BODY>
<FONT FACE="Arial Cyr, Helvetica" SIZE="4" COLOR="green">
Цвет, размер и шрифт выбраны.</FONT>
</BODY>
</HTML>

                                                 Предварительное форматирование

Неразрывный пробел – &nbsp; (non-breaking space).

Перенос строки – <br>

Размещение текста в том виде, в котором он представлен –

<PRE>... </PRE>

Пример:
<HTML>
<BODY>
<PRE>
Предварительное      форматирование текста
  //       *       //
</PRE> <br>
Mitsubishi Galant <br>
Mitsubishi Galant.
<P> Начало нового абзаца!
</P>
</BODY>
</HTML>

                                                          Верхние и нижние индексы


Верхний индекс - тег SUP, а нижний - SUB.

<HTML>
<BODY>
X<SUP>3</SUP>
<br>
A<SUB>3</SUB>
</BODY>
</HTML>

                                                            Выравнивание


Тег нового абзаца <P>


                                       Атрибут тега <P>   
  ALIGN     ВЫРАВНИВАНИЕ
  left
   по левой границе
  center     по центру
  right     по правой границе
  justify
   по ширине


<HTML>
<BODY>
<p align=center>Значение CENTER - центрирование</p>
<p align=right>Значение RIGHT - выравнивание по правому краю.</p>
<p align=left>Значение LEFT - выравнивание по левому краю</p>
</BODY>
</HTML>

                                               Графика на Web-страницах

На Web-страницах возможно размещать графическую информацию.
Желаемым условием графики в сети является небольшой размер файлов, наиболее часто реализуется в форматах GIF и JPEG.


  Формат     Диапазон цветов

Прозрачность   

    Анимация
  GIF     от 2 до 256     Да     Да
  JPEG     16 милионов или 256 оттенков (Grayscale)     Нет     Нет


Для публикаций изображений используется тег IMG:

                                             Атрибуты тега IMG   
  SRC     имя графического файла и путь до него
  WIDTH 
   ширина изображения в пикселах
  HEIGHT     высота изображения в пикселах
  BORDER     ширина рамки вокруг изображения в пиксели
  ALT     альтернативный текст изображения
  ALIGN     расположение на экране: Left - слева, Right – справа


<HTML>
<BODY>
<IMG SRC= "image/1.gif" WIDTH="155" HEIGHT="155" BORDER="2" ALT="Бабочка" align="right">
</BODY>
</HTML>

                                       Графика на Web-страницах: пример

29.06-7.jpg

<IMG SRC=ie.gif ALIGN="RIGHT" BORDER=1

ALT=“Веселая картинка">
Картинку можно разместить справа от текста...


29.06-8.jpg

<img src=ie.gif align="LEFT">
<img src=ie2.gif align="RIGHT">
Атрибут ALIGN дает возможность разместить текст на Web-странице между двумя изображениями...

29.06-9.jpg

29.06-10.jpg

<IMG SRC=PALMA.JPG ALIGN="LEFT"
HSPACE=30 VSPACE=30>

Ссылки служат для перехода с одной страницы на другую, перенаправление по протоколам ссылок и прочее.
Реализуются с помощью тега A.

                                                   Атрибуты тега A   
   href

 Имя и путь к странице

 Интернет-адрес с именем протокола: http://

 Ссылка отправления письма на e-mail: mailto:
  Переход на ссылку внутри документа #

  target     имя окна, в которое отправит ссылка:

_blank - открывает ссылку в новом окно браузера

_top - окно стоящее поверх остальных
_parent - открывает ссылку в родительском окне (по умолчанию)

  name     имя ссылки в документе


                                                 Ссылки на Web-страницах


  Ссылка в пределах одного сайта:     <A HREF=menu/1.htm>Заходите в гости!</А>
  Ссылка на ресурс Интернет:     <A HREF=http://gimn6.krsk.info target="_blank">Ссылка на сайт гимназии 6 </А>
  Ссылка на ресурс Интернет:     <A HREF=

    http://www.mysite.ru/html/example.html>

    Текст является ссылкой на документ
     example.html на сайте www.mysite.ru в папке HTML</A>

  Ссылка на адрес электронной почты:
    <A HREF="mailto:vlata@hotbox.ru"> Присылайте письма!</A>
  Ссылка на метку внутри данного документа:     <A HREF="#mesto">Переход по метке</A> –

    переход к строке этого же документа,

    помеченной

    <A NAME="mesto">

  Картинка-ссылка
   <A HREF=example.html><img src=example.gif

    width=100 height=100 border=0></A>
    <A HREF=example2.gif><img src=example.gif 
    width=100 height=100 border=0></A>

  Ссылка на произвольный файл:

   <A HREF= "MyFile.exe" Title=“Файл в 10 Мегабайт">Скачать программу</А>
  Абсолютные ссылки:     <A HREF= http://www.mysite.ru/html/example.html>

     Текст является ссылкой на документ example.html

     на сайте www.mysite.ru в папке HTML
     </A>

  Относительные ссылки:     <A HREF=/html/example.html>

    Ссылка на файл example.html лежащий в папке HTML сайта
     </A>

  Относительные ссылки:     <A HREF=../example.html>

    <img src=images/example.gif width=100 height=100 border=0>
     </A>


                                                   Списки на Web-страницах

29.06-11.jpg

29.06-12.jpg

29.06-13.jpg

29.06-14.jpg

                                                Списки с графическими маркерами


Картинки для маркеров должны быть небольшого размера, соответствовать форматированию текста. Образцы маркеров можно найти на сайтах:

www.grapholina.com/Grafics и www.theshockzone.com

29.06-15.jpg

Для указания способа вертикального выравнивания текста относительно границ маркеров можно воспользоваться атрибутом ALIGN (top, middle, bottom) тега IMG:
<BR><img src="spisok.gif" align="middle">Раз
Атрибут HSPACE тега IMG позволит отделить картинку маркера от текста:
<BR><img src="spisok.gif" HSPACE="10">Раз

Перейти до презентації можна клікнувши на текст "Презентація" і встановивши Microsoft PowerPoint

Надіслано вчителем інформатики Ісуповим С. Л.

Інформатика для 8 класу, підручники та книги з інформатики скачати, бібліотека онлайн

Предмети > Інформатика > Інформатика 8 клас > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали > Служба WWW. Гіпертекстові документи і гіперпосилання. Веб-сторінки, веб-сайти, веб-портали. Презентація уроку