Язык гипертекстовой разметки HTML презентация

Содержание

html-файл – это текстовый файл, то есть документ HTML можно создать любым текстовым редактором на любой аппаратной платформе в среде любой ОС. Гипертекстовая база данных в концепции WWW - это

Слайд 1Язык гипертекстовой разметки HTML
Разработан Томасом Бернерсом-Ли в 1989 году для реализации

гипертекстовой технологии.

HTML пытался решить две задачи:

1) дать дизайнерам гипертекстовых баз данных простое средство создания документов;

2) реализовать мощный интерфейс пользователя гипертекстовых баз данных.

Первая задача была решена за счет выбора дескрипторной (теговой) модели описания документов.

Слайд 2html-файл – это текстовый файл, то есть документ HTML можно создать

любым текстовым редактором на любой аппаратной платформе в среде любой ОС.

Гипертекстовая база данных в концепции WWW - это набор текстовых файлов, написанных на языке HTML, который определяет форму представления информации (разметки) и структуру связей этих файлов (гипертекстовые ссылки).

Такой подход предполагает наличие еще одной компоненты технологии - интерпретатора языка.

Слайд 3В WWW функции интерпретатора языка разделены между сервером гипертекстовой базы данных

и броузером пользователя.

Сервер:
обеспечивает доступ к документам;
обрабатывает гипертекстовые ссылки;
осуществляет препроцессорную обработку документов.

Интерфейс пользователя:
- осуществляет интерпретацию конструкций языка HTML, связанных с представлением информации.

Слайд 4В настоящее время известна версия языка HTML 5.0.
Принцип построения и интерпретации

HTML

Дескрипторная (теговая) модель описывает документ как совокупность элементов, каждый из которых окружен дескриптором (тегом).

Теги аналог операторных скобок типа «begin/end».

Теги определяют область действия правил интерпретации текстовых элементов документа.

Слайд 5Синтаксис HTML-дескрипторов
HTML-дескриптор состоит из имени, за которым может следовать необязательный список

атрибутов дескриптора.

Текст HTML-дескриптора заключается в угловые скобки (< и >).

Атрибуты дескриптора следуют за именем и отделяются друг от друга одним или несколькими знаками табуляции, пробелами или символами возврата каретки.

Слайд 6Порядок записи атрибутов в дескрипторе, в основном, значения не имеет.
Значение атрибута,

если он есть, следует за знаком равенства, стоящим после имени атрибута.

Если значение атрибута - одно слово или число, то его можно просто указать после знака равенства, не выделяя дополнительно.

Все остальные значения необходимо заключать в одинарные или двойные кавычки.

Длина значения атрибута ограничена 1024 символами.

Слайд 7Регистр символов не учитывается в именах дескрипторов и атрибутов и учитывается

в значениях атрибутов.

Большинство HTML-дескрипторов состоит из двух идентичных команд:
<имя [атрибуты]> – начало форматирования;
- конец форматирования.

<имя> … - контейнер.

Конечные дескрипторы не содержат атрибутов.

Дескрипторы бывают вложенные, закрываются в обратном порядке.

Слайд 8Некоторые дескрипторы не имеют конечного компонента – это автономные элементы.
Структура HTML-документов
HTML-документ

обрамляется командами … .

Как правило HTML- документ состоит из двух частей:
- заголовок (Head);
- собственно документ (Body).

заголовок .
основной текст .

Слайд 9Заголовок

…
Название документа


…

Заголовок содержит в себе общую информацию о документе, которая не отображается на экране.

и - единственные обязательные элементы заголовка.

«Название документа» используется поисковыми серверами, выводится в заголовке браузера.

Слайд 10Основное назначение элементов заголовка - это описание общих для всего документа

параметров отображения. Например, стиль отображения документа, общий базовый адрес гипертекстовых ссылок, общие гипертекстовые ссылки, идентификатор и имя документа и т.п.

Элементы заголовка

Дескриптор BASE.

Обеспечивает возможность неполной адресации при задании URL в HTML-документе.

Задаёт базовый адрес, использующийся для формирования полной формы URL из неполной.

Слайд 11Например,

Ссылка

будет расширена до

Дескриптор META
Содержит служебную информацию

для браузеров, поисковых серверов и других служб Интернета.

Не имеет закрывающего дескриптора.

Слайд 12Имеет три атрибута: NAME, CONTENT, HTTP-EQUIV.
Атрибут NAME чаще всего принимает три

значения:
- author;
- keywords;
- description.



Эти теги используются поисковыми серверами.

Слайд 13
Атрибут HTTP-EQUIV передают браузеру дополнительную информацию о странице.

NAME="Document-state" CONTENT = "Dynamic">



Слайд 14В каждом дескрипторе META допускается использование только одной мета-записи.
Поэтому, когда нужно

использовать несколько мета-записей, то создаётся список дескрипторов META.

Дескриптор STYLE

Предназначен для задания стиля отображения документа: назначения фонтов для отображения заголовков, списков и других элементов текста, примеров, ссылок и т.п.

Слайд 15Дескрипторы и определяют тело HTML- документа, т.е. текст, заключенный

между этими командами отображается браузером на экран.

Комментарии

Задаются дескриптором:

Могут находиться в любом месте файла, кроме описания дескриптора.

Не могут быть вложенными.

Слайд 16Абзацы

Текст абзаца 1
Текст абзаца 2

Имеет

атрибуты: ALIGN и CLEAR.

Абзац задаётся тегами

и

.

Атрибут ALIGN производит выравнивание абзаца.

Принимает следующие значения: "center"; "left";
"right", “justify".

Слайд 17 Текст абзаца 1
Текст абзаца 2

Атрибут CLEAR применяется для любого блочного элемента в случае обтекания текстом графики или таблиц.

Предписывает браузеру немедленно остановить поток текста и возобновить его от левого края следующей строки (или от правого края выровненного влево рисунка или таблицы).

Слайд 18


Текст абзаца 2
Директива
применяется

для окончания строки.

Для табуляции текста применяется директива


Текст абзаца 2

Новая строка


Слайд 19Заголовки разных уровней
Заголовки в HTML-документах отображаются директивами ,,,,, и ,,,

,,.

Заголовок 1


Заголовок 2


Форматирование символов

Используются два метода:
- физические шрифты;
- логические шрифты.

Слайд 20Логические шрифты задаются с помощью тегов …
Возможные стили:
 - служит для описания

определений (это определение);
 - служит для выделения текста (это выделенное слово);
 - служит для выделения цитат (это цитата);
 - служит для выделения программных кодов, текстов программ и т.п. Обычно выделяется шрифтом фиксированной ширины:
 - используется для ввода с клавиатуры пользователя;

Слайд 21 - используется для вывода машинных сообщений (Segmentation fault: core dumped);
 - служит

для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст);
 - используется для символьных переменных (это переменная);
 - используется для аббревиатур;
 - используется для сокращений (стр., англ.).
Элементы и могут содержать атрибут , описывающий расшифровку аббревиатуры или сокращения: <ABBR TITLE="World Wide Web">WWW</ABBR>.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/c33ad435dc95ddde66418a68f65b08b3-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" - используется для вывода машинных сообщений (Segmentation fault: core dumped); - служит для особого выделения текста, обычно выделяется жирным текстом (это очень важный текст); - используется для символьных переменных (это переменная); - используется для аббревиатур;  - используется для сокращений (стр., англ.).Элементы и могут содержать атрибут , описывающий расшифровку аббревиатуры или сокращения: WWW."><img src="/img/tmb/5/428441/c33ad435dc95ddde66418a68f65b08b3-800x.jpg" title=" - используется для вывода машинных сообщений (Segmentation fault: core dumped); - служит для особого выделения текста," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide22"> <h2><a href="/img/tmb/5/428441/37c1ad4258c9f97b07b85de148eea2f4-800x.jpg" target="_blank">Слайд 22</a>Для физических шрифтов форматирование задаётся следующим образом:<br>- жирный(Bold): ;<br>- курсив(.Italic):</h2> <div class="text"> <I> </I>;<br>- с подчеркиванием(Underline): <U> </U>;<br> моноширинный(): <TT> </TT>;<br> шрифт большего размера: <BIG></BIG>;<br> шрифт меньшего размера: <SMALL></SMALL>;<br> перечёркнутый шрифт: <S> </S>; <STRIKE> </STRIKE>.<br><p><p> <CODE> int i=0;</CODE> </p><br> </div> <div class="image"> <a href="/img/tmb/5/428441/37c1ad4258c9f97b07b85de148eea2f4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Для физических шрифтов форматирование задаётся следующим образом:- жирный(Bold): ;- курсив(.Italic): ;- с подчеркиванием(Underline): ; моноширинный(): ; шрифт большего размера: ; шрифт меньшего размера: ; перечёркнутый шрифт: ; . int i=0; "><img src="/img/tmb/5/428441/37c1ad4258c9f97b07b85de148eea2f4-800x.jpg" title="Для физических шрифтов форматирование задаётся следующим образом:- жирный(Bold): ;- курсив(.Italic): ;- с подчеркиванием(Underline): ; моноширинный():" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide23"> <h2><a href="/img/tmb/5/428441/1a0433e54fc0e66955ee470dba50dfb7-800x.jpg" target="_blank">Слайд 23</a>Для задания шрифта используется контейнер:<br> ...... <br></h2> <div class="text"> align="right"> <B> <I> <BIG> Текст <BIG> абзаца 1 </BIG> </BIG> </I> </B> </p><br><p><FONT SIZE="5" COLOR="RED" FACE="SANS-SERIF">Крупный шрифт красного цвета без засечек</FONT> <br><p>Цветовая палитра документа<br><p>Задаётся в теге <body>.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/1a0433e54fc0e66955ee470dba50dfb7-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Для задания шрифта используется контейнер: ...... Текст абзаца 1 Крупный шрифт красного цвета без засечек Цветовая палитра документаЗадаётся в теге ."><img src="/img/tmb/5/428441/1a0433e54fc0e66955ee470dba50dfb7-800x.jpg" title="Для задания шрифта используется контейнер: ...... Текст абзаца 1 Крупный шрифт" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide24"> <h2><a href="/img/tmb/5/428441/8ad0f8f70c56fd9a37841ba3b2bd21de-800x.jpg" target="_blank">Слайд 24</a>TEXT="FFFFFF" - для текста;<br>BGCOLOR="000000" - для фона;<br>LINK="FFFF00" - для гипертекстовой ссылки;<br>ALINK="00FF00"</h2> <div class="text"> - для активизированной гипертекстовой ссылки;<br>VLINK="FF00FF" - для просмотренных гипертекстовых ссылок.<br><p>Отображение специальных символов<br><p>Если нужно использовать символы <, >, &, " в тексте документа без их специального назначения, то необходимо включить как "символьные ссылки" или как "смысловые ссылки".<br> </div> <div class="image"> <a href="/img/tmb/5/428441/8ad0f8f70c56fd9a37841ba3b2bd21de-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="TEXT="FFFFFF" - для текста;BGCOLOR="000000" - для фона;LINK="FFFF00" - для гипертекстовой ссылки;ALINK="00FF00" - для активизированной гипертекстовой ссылки;VLINK="FF00FF" - для просмотренных гипертекстовых ссылок.Отображение специальных символовЕсли нужно использовать символы , &, " в тексте документа без их специального назначения, то необходимо включить как "символьные ссылки" или как "смысловые ссылки"."><img src="/img/tmb/5/428441/8ad0f8f70c56fd9a37841ba3b2bd21de-800x.jpg" title="TEXT="FFFFFF" - для текста;BGCOLOR="000000" - для фона;LINK="FFFF00" - для гипертекстовой ссылки;ALINK="00FF00" - для активизированной гипертекстовой" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide25"> <h2><a href="/img/tmb/5/428441/47e80577893221335d03ddfe11c2653b-800x.jpg" target="_blank">Слайд 25</a><H1> Это заголовок </H1><br>Списки в HTML-документе<br>В HTML-документе используются несколько видов списков:<br>1)</h2> <div class="text"> неупорядоченные списки;<br> </div> <div class="image"> <a href="/img/tmb/5/428441/47e80577893221335d03ddfe11c2653b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="<H1> Это заголовок </H1>Списки в HTML-документеВ HTML-документе используются несколько видов списков:1) неупорядоченные списки;"><img src="/img/tmb/5/428441/47e80577893221335d03ddfe11c2653b-800x.jpg" title="<H1> Это заголовок </H1>Списки в HTML-документеВ HTML-документе используются несколько видов списков:1) неупорядоченные списки;" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide26"> <h2><a href="/img/tmb/5/428441/984bb47292778597bab2d8270c03072a-800x.jpg" target="_blank">Слайд 26</a>2) упорядоченные списки;<br>3) списки-определения (списки типа глоссария);<br>4) список - меню и</h2> <div class="text"> список без пометок (списки-каталоги).<br><p>Неупорядоченные списки<br><p>отображаются в виде последовательности помеченных элементов.<br><p>Элементы неупорядоченного списка могут идти в любом порядке.<br><p>Отдельные элементы списка могут быть довольно велики и даже включать в себя другие дескрипторы.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/984bb47292778597bab2d8270c03072a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="2) упорядоченные списки;3) списки-определения (списки типа глоссария);4) список - меню и список без пометок (списки-каталоги).Неупорядоченные спискиотображаются в виде последовательности помеченных элементов.Элементы неупорядоченного списка могут идти в любом порядке.Отдельные элементы списка могут быть довольно велики и даже включать в себя другие дескрипторы."><img src="/img/tmb/5/428441/984bb47292778597bab2d8270c03072a-800x.jpg" title="2) упорядоченные списки;3) списки-определения (списки типа глоссария);4) список - меню и список без пометок (списки-каталоги).Неупорядоченные" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide27"> <h2><a href="/img/tmb/5/428441/45cc27aff2cfe2b1492afa8bd6240d8e-800x.jpg" target="_blank">Слайд 27</a> Для формирования неупорядоченного списка используются директивы и .<br>В</h2> <div class="text"> директиве <UL> может применяться атрибут TYPE="тип", где тип принимает следующие значения:<br>- DISC - элемент списка отмечается темным кругом (по умолчанию);<br>- CIRCLE - элемент списка отмечается окружностью;<br>- SQUARE - элемент списка отмечается прямоугольником.<br><p>Дескриптор <LI> используется для маркировки элемента списка.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/45cc27aff2cfe2b1492afa8bd6240d8e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Для формирования неупорядоченного списка используются директивы и .В директиве может применяться атрибут TYPE="тип", где тип принимает следующие значения:- DISC - элемент списка отмечается темным кругом (по умолчанию);- CIRCLE - элемент списка отмечается окружностью;- SQUARE - элемент списка отмечается прямоугольником.Дескриптор используется для маркировки элемента списка."><img src="/img/tmb/5/428441/45cc27aff2cfe2b1492afa8bd6240d8e-800x.jpg" title="Для формирования неупорядоченного списка используются директивы и .В директиве может применяться атрибут TYPE="тип"," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide28"> <h2><a href="/img/tmb/5/428441/8426a8968718e52aa34cc61aadbcb518-800x.jpg" target="_blank">Слайд 28</a><br> - Первый список<br> </h2> <div class="text"> <UL type="SQUARE"><br> <LI> - Первый подсписок<br> <LI> - Второй подсписок<br> </UL><br> <LI> - Второй список<br> <UL><br> <LI> - Первый подсписок<br> <LI> - Второй подсписок<br> </UL><br></UL><br> </div> <div class="image"> <a href="/img/tmb/5/428441/8426a8968718e52aa34cc61aadbcb518-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" - Первый список - Первый подсписок - Второй подсписок - Второй список - Первый подсписок - Второй подсписок "><img src="/img/tmb/5/428441/8426a8968718e52aa34cc61aadbcb518-800x.jpg" title="- Первый список - Первый подсписок" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide29"> <h2><a href="/img/tmb/5/428441/5d9125882d055d987763a3eb1d9d8f01-800x.jpg" target="_blank">Слайд 29</a>Упорядоченные списки<br> Это списки, все записи которых при отображении пронумерованы.<br><br> </h2> <div class="text"> <LI> Первый пункт<br> <LI> Второй пункт<br> <LI> Третий пункт<br> </OL><br><p>Чтобы изменить способ нумерации в этих списках, нужно использовать атрибут type для тега <OL>: <OL TYPE="тип"><br><p>Для формирования упорядоченного списка используются директивы <OL> </OL> и <LI>.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/5d9125882d055d987763a3eb1d9d8f01-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Упорядоченные списки Это списки, все записи которых при отображении пронумерованы. Первый пункт Второй пункт Третий пункт Чтобы изменить способ нумерации в этих списках, нужно использовать атрибут type для тега : Для формирования упорядоченного списка используются директивы и ."><img src="/img/tmb/5/428441/5d9125882d055d987763a3eb1d9d8f01-800x.jpg" title="Упорядоченные списки Это списки, все записи которых при отображении пронумерованы. Первый пункт" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide30"> <h2><a href="/img/tmb/5/428441/f1f04102c98576c47bac7f335f017551-800x.jpg" target="_blank">Слайд 30</a>Атрибут START="число" тега задаёт число, с которого начинается нумерация списка.<br>Атрибут</h2> <div class="text"> VALUE="число" тега <LI> задаёт число, с которого будут нумероваться этот и следующие элементы списка.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/f1f04102c98576c47bac7f335f017551-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Атрибут START="число" тега задаёт число, с которого начинается нумерация списка.Атрибут VALUE="число" тега задаёт число, с которого будут нумероваться этот и следующие элементы списка."><img src="/img/tmb/5/428441/f1f04102c98576c47bac7f335f017551-800x.jpg" title="Атрибут START="число" тега задаёт число, с которого начинается нумерация списка.Атрибут VALUE="число" тега задаёт число, с" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide31"> <h2><a href="/img/tmb/5/428441/6f834bd41acf9c1b55b10b500dd39ac1-800x.jpg" target="_blank">Слайд 31</a><br> Первый пункт<br> </h2> <div class="text"> <LI> Второй пункт<br> <LI VALUE="8"> Третий пункт<br> <LI> Четвертый пункт<br></OL><br><p>Списки-определения (списки типа глоссария)<br><p>Это списки, состоящие из определяемой части (термина) и определяющей части (определения).<br> </div> <div class="image"> <a href="/img/tmb/5/428441/6f834bd41acf9c1b55b10b500dd39ac1-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Первый пункт Второй пункт Третий пункт Четвертый пунктСписки-определения (списки типа глоссария)Это списки, состоящие из определяемой части (термина) и определяющей части (определения)."><img src="/img/tmb/5/428441/6f834bd41acf9c1b55b10b500dd39ac1-800x.jpg" title="Первый пункт Второй пункт Третий пункт" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide32"> <h2><a href="/img/tmb/5/428441/cd4cab49010215b42c6ff2cf9140dadb-800x.jpg" target="_blank">Слайд 32</a> Данный список задается тегами и .<br> Для задания определяемой</h2> <div class="text"> части применяются теги <DT> и </DT>.<br><p><DL><br> <DT> HTML </DT> <DD> - это язык гипертекстовой разметки</DD><br> <DT> HTML-файл </DT> <DD> - это текстовый файл, содержащий теги HTML</DD><br></DL><br><p>Для задания определяющей части применяются теги <DD> и </DD>.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/cd4cab49010215b42c6ff2cf9140dadb-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Данный список задается тегами и . Для задания определяемой части применяются теги и . HTML - это язык гипертекстовой разметки HTML-файл - это текстовый файл, содержащий теги HTMLДля задания определяющей части применяются теги и ."><img src="/img/tmb/5/428441/cd4cab49010215b42c6ff2cf9140dadb-800x.jpg" title="Данный список задается тегами и . Для задания определяемой части применяются теги и ." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide33"> <h2><a href="/img/tmb/5/428441/de354434dcfc344b06a8bde82c0b3d2d-800x.jpg" target="_blank">Слайд 33</a>Список-меню и список без пометок (списки-каталоги)<br> Меню и списки без пометок</h2> <div class="text"> - это варианты неупорядоченного списка.<br><p>Для вывода списка-меню используются теги <MENU> и </MENU>.<br><p>Элемент списка-меню маркируется тегом <LI>.<br><p><MENU><br><LH><B>Виды списков в HTML</B><br><LI><A HREF="#OL">Упорядоченный список</A><br> </div> <div class="image"> <a href="/img/tmb/5/428441/de354434dcfc344b06a8bde82c0b3d2d-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Список-меню и список без пометок (списки-каталоги) Меню и списки без пометок - это варианты неупорядоченного списка.Для вывода списка-меню используются теги и .Элемент списка-меню маркируется тегом .Виды списков в HTMLУпорядоченный список"><img src="/img/tmb/5/428441/de354434dcfc344b06a8bde82c0b3d2d-800x.jpg" title="Список-меню и список без пометок (списки-каталоги) Меню и списки без пометок - это варианты неупорядоченного" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide34"> <h2><a href="/img/tmb/5/428441/822d353167fde21fe125f2f447004ff4-800x.jpg" target="_blank">Слайд 34</a>Неупорядоченный список<br>Список каталогов<br>Список определений<br><br>Для вывода списка без пометок</h2> <div class="text"> используются теги <DIR> и </DIR>.<br><p><dir><br><LI> 1-й каталог<br><LI> 2-й каталог<br></dir><br> </div> <div class="image"> <a href="/img/tmb/5/428441/822d353167fde21fe125f2f447004ff4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Неупорядоченный списокСписок каталоговСписок определенийДля вывода списка без пометок используются теги и . 1-й каталог 2-й каталог"><img src="/img/tmb/5/428441/822d353167fde21fe125f2f447004ff4-800x.jpg" title="Неупорядоченный списокСписок каталоговСписок определенийДля вывода списка без пометок используются теги и . 1-й каталог 2-й каталог" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide35"> <h2><a href="/img/tmb/5/428441/fd66ae60b32060ebd3cdba5e052795c3-800x.jpg" target="_blank">Слайд 35</a>Горизонтальная линия (разделитель)<br>Для прочерчивания горизонтальной линии используется директива .<br>Она чертит горизонтальную</h2> <div class="text"> линию шириной WIDTH и толщиной SIZE в пикселях или в процентах от выводимого экрана.<br><p>WIDTH= и SIZE= - атрибуты данной директивы.<br><p>Принятая по умолчанию линия имеет толщину, равную единице.<br><p><HR SIZE=2 WEIDTH=300><br><HR SIZE=2 WEIDTH=10%><br> </div> <div class="image"> <a href="/img/tmb/5/428441/fd66ae60b32060ebd3cdba5e052795c3-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Горизонтальная линия (разделитель)Для прочерчивания горизонтальной линии используется директива .Она чертит горизонтальную линию шириной WIDTH и толщиной SIZE в пикселях или в процентах от выводимого экрана.WIDTH= и SIZE= - атрибуты данной директивы.Принятая по умолчанию линия имеет толщину, равную единице."><img src="/img/tmb/5/428441/fd66ae60b32060ebd3cdba5e052795c3-800x.jpg" title="Горизонтальная линия (разделитель)Для прочерчивания горизонтальной линии используется директива .Она чертит горизонтальную линию шириной WIDTH и" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide36"> <h2><a href="/img/tmb/5/428441/8f6514c62cd25ece5f213bc9d85f1012-800x.jpg" target="_blank">Слайд 36</a>Встраивание предварительно сформатированного текста<br>Чтобы текст отображался шрифтом фиксированной ширины с сохранением</h2> <div class="text"> всех пробелов, используются теги <PRE> и </PRE>, между которыми заключается предварительно сформатированный текст.<br><p>С тегом <PRE> может быть использован атрибут WIGTH="число", который определяет ширину строки в символах. Тогда браузер не будет переносить строки, которые короче указанной длины.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/8f6514c62cd25ece5f213bc9d85f1012-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Встраивание предварительно сформатированного текстаЧтобы текст отображался шрифтом фиксированной ширины с сохранением всех пробелов, используются теги и , между которыми заключается предварительно сформатированный текст.С тегом может быть использован атрибут WIGTH="число", который определяет ширину строки в символах. Тогда браузер не будет переносить строки, которые короче указанной длины."><img src="/img/tmb/5/428441/8f6514c62cd25ece5f213bc9d85f1012-800x.jpg" title="Встраивание предварительно сформатированного текстаЧтобы текст отображался шрифтом фиксированной ширины с сохранением всех пробелов, используются теги" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide37"> <h2><a href="/img/tmb/5/428441/800fa4914b9e0183739eefe136ed492e-800x.jpg" target="_blank">Слайд 37</a><br> </h2> <div class="text"> .-.<br> __ / \ __<br> ( `'.\ /.'` )<br> '-._.(;;;)._.-'<br> .-' ,`"`, '-.<br> (__.-'/ \'-.__)<br> \ /\<br> '-' \<br> , |<br> |\ |<br> \ | |<br> | \ /<br> \|/ _,<br> / __/ /<br> | _/ _.'<br> |/__/<br> \<br> </pre><br> </div> <div class="image"> <a href="/img/tmb/5/428441/800fa4914b9e0183739eefe136ed492e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" .-. __ / \ __ ( `'.\ /.'` ) '-._.(;;;)._.-' .-' ,`"`, '-. (__.-'/ \'-.__) \ /\ '-' \ , | |\ | \ | | | \ / \|/ _, / __/ / | _/ _.' |/__/ \ "><img src="/img/tmb/5/428441/800fa4914b9e0183739eefe136ed492e-800x.jpg" title=".-. __" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide38"> <h2><a href="/img/tmb/5/428441/c2671f8c3040406b5b4c67a71e61d81d-800x.jpg" target="_blank">Слайд 38</a>Без использования тегов и :<br>Между тегами и допустимо</h2> <div class="text"> использование <p> и <br>.<br><p>Ввод гипертекстовых ссылок<br><p>Гипертекстовые ссылки в HTML делятся на два класса:<br>контекстные гипертекстовые ссылки;<br> общие.<br><p>Контекстные ссылки вмонтированы в тело документа.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/c2671f8c3040406b5b4c67a71e61d81d-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Без использования тегов и :Между тегами и допустимо использование и .Ввод гипертекстовых ссылокГипертекстовые ссылки в HTML делятся на два класса:контекстные гипертекстовые ссылки; общие.Контекстные ссылки вмонтированы в тело документа."><img src="/img/tmb/5/428441/c2671f8c3040406b5b4c67a71e61d81d-800x.jpg" title="Без использования тегов и :Между тегами и допустимо использование и .Ввод гипертекстовых ссылокГипертекстовые ссылки в" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide39"> <h2><a href="/img/tmb/5/428441/5e797292a5d61a56666df15ee3125f24-800x.jpg" target="_blank">Слайд 39</a>Общие ссылки связаны со всем документом в целом и могут быть</h2> <div class="text"> использованы при просмотре любого фрагмента документа.<br><p>В любом месте основной части документа можно ввести ссылки на другой документ или файл.<br><p>Ссылки вводятся в HTML-документ с помощью URL.<br><p>Общий вид синтаксиса для перекрестных ссылок в WWW имеет вид:<br>КАК(Префикс):// КТО/ГДЕ/ЧТО (Документ)<br> </div> <div class="image"> <a href="/img/tmb/5/428441/5e797292a5d61a56666df15ee3125f24-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого фрагмента документа.В любом месте основной части документа можно ввести ссылки на другой документ или файл.Ссылки вводятся в HTML-документ с помощью URL.Общий вид синтаксиса для перекрестных ссылок в WWW имеет вид:КАК(Префикс):// КТО/ГДЕ/ЧТО (Документ)"><img src="/img/tmb/5/428441/5e797292a5d61a56666df15ee3125f24-800x.jpg" title="Общие ссылки связаны со всем документом в целом и могут быть использованы при просмотре любого" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide40"> <h2><a href="/img/tmb/5/428441/b78089cf3086d9f030c1822671d85559-800x.jpg" target="_blank">Слайд 40</a>По ПРЕФИКСУ браузер распознает, как будут передаваться данные по коммуникационным линиям</h2> <div class="text"> Сети.<br><p>Процедуру передачи определяет протокол.<br><p>Важнейшие префиксы для URL:<br>- FTP:// - FTP-сервер;<br>- HTTP:// - WWW-сервер;<br>- FILE://LOCALHOST – локальный диск.<br><p>"КТО" - имя компьютера (хоста), на котором находится ресурс. Эта часть адреса Internet, которая содержит DSN адреса. Часть "КТО" просто присоединяется к части "КАК".<br> </div> <div class="image"> <a href="/img/tmb/5/428441/b78089cf3086d9f030c1822671d85559-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="По ПРЕФИКСУ браузер распознает, как будут передаваться данные по коммуникационным линиям Сети.Процедуру передачи определяет протокол.Важнейшие префиксы для URL:- FTP:// - FTP-сервер;- HTTP:// - WWW-сервер;- FILE://LOCALHOST – локальный диск."КТО" - имя компьютера (хоста), на котором находится ресурс. Эта часть адреса Internet, которая содержит DSN адреса. Часть "КТО" просто присоединяется к части "КАК"."><img src="/img/tmb/5/428441/b78089cf3086d9f030c1822671d85559-800x.jpg" title="По ПРЕФИКСУ браузер распознает, как будут передаваться данные по коммуникационным линиям Сети.Процедуру передачи определяет протокол.Важнейшие" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide41"> <h2><a href="/img/tmb/5/428441/32901fca65f993bbe4a034d0f02ebe92-800x.jpg" target="_blank">Слайд 41</a>"ГДЕ" определяет полный путь каталога, где находится ресурс.<br>Каталог нужно вставить в</h2> <div class="text"> адрес URL и добавить в конце символ наклонной черты /.<br><p>"ЧТО" содержит имя используемого файла.<br><p>file://localhost/C:/bola/Work/Programing_Internet/1.html<br><p>Реализация гиперссылок<br><p>1. Для ссылки на любую страницу в Интернете используется её абсолютный адрес.<br> </div> <div class="image"> <a href="/img/tmb/5/428441/32901fca65f993bbe4a034d0f02ebe92-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""ГДЕ" определяет полный путь каталога, где находится ресурс.Каталог нужно вставить в адрес URL и добавить в конце символ наклонной черты /."ЧТО" содержит имя используемого файла.file://localhost/C:/bola/Work/Programing_Internet/1.htmlРеализация гиперссылок1. Для ссылки на любую страницу в Интернете используется её абсолютный адрес."><img src="/img/tmb/5/428441/32901fca65f993bbe4a034d0f02ebe92-800x.jpg" title=""ГДЕ" определяет полный путь каталога, где находится ресурс.Каталог нужно вставить в адрес URL и добавить" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide42"> <h2><a href="/img/tmb/5/428441/5aeb05c2660755291cd6c22a3478fe9d-800x.jpg" target="_blank">Слайд 42</a> Ссылка на главную страницу сайта <br>2. Для ссылки на</h2> <div class="text"> страницу в пределах сайта используется относительный URL (page.html, catalog/page.html). <br><p><a href="/../2.html">Дополнительная информация</a> <br><p>3. Гиперссылка в пределах html страницы задаётся с помощью атрибута NAME тэга <A>. <br> </div> <div class="image"> <a href="/img/tmb/5/428441/5aeb05c2660755291cd6c22a3478fe9d-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Ссылка на главную страницу сайта 2. Для ссылки на страницу в пределах сайта используется относительный URL (page.html, catalog/page.html). Дополнительная информация 3. Гиперссылка в пределах html страницы задаётся с помощью атрибута NAME тэга . "><img src="/img/tmb/5/428441/5aeb05c2660755291cd6c22a3478fe9d-800x.jpg" title="Ссылка на главную страницу сайта 2. Для ссылки на страницу в пределах сайта используется" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide43"> <h2><a href="/img/tmb/5/428441/fb33fb2df317049e6aca96f08fbba611-800x.jpg" target="_blank">Слайд 43</a>Меню<br>…<br>Вернуться к меню<br>4. При задании почтовой гиперссылки указывается e-mail;</h2> <div class="text"> можно указать кому адресовано письмо, тема сообщения и дополнительный e-mail<br> </div> <div class="image"> <a href="/img/tmb/5/428441/fb33fb2df317049e6aca96f08fbba611-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Меню…Вернуться к меню4. При задании почтовой гиперссылки указывается e-mail; можно указать кому адресовано письмо, тема сообщения и дополнительный e-mail"><img src="/img/tmb/5/428441/fb33fb2df317049e6aca96f08fbba611-800x.jpg" title="Меню…Вернуться к меню4. При задании почтовой гиперссылки указывается e-mail; можно указать кому адресовано письмо, тема" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide44"> <h2><a href="/img/tmb/5/428441/0ab01097f7cd08e832a215129b1135fb-800x.jpg" target="_blank">Слайд 44</a> bolatiger@gmail.com<br>Открытие html страниц в</h2> <div class="text"> новом окне<br><p><a href="/../Programming_Internet/2.html" target="_blank"> Дополнительная информация</a> <br> </div> <div class="image"> <a href="/img/tmb/5/428441/0ab01097f7cd08e832a215129b1135fb-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" bolatiger@gmail.comОткрытие html страниц в новом окне Дополнительная информация "><img src="/img/tmb/5/428441/0ab01097f7cd08e832a215129b1135fb-800x.jpg" title="bolatiger@gmail.comОткрытие html страниц в новом окне Дополнительная информация" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide45"> <h2><a href="/img/tmb/5/428441/f89b372b7d833ed43fb7dd2f4b0817f4-800x.jpg" target="_blank">Слайд 45</a>Порядок перехода по гиперссылкам<br>При перемещении с помощью клавиши браузер по</h2> <div class="text"> умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. <br><p>Изменить порядок перехода можно с помощью атрибута TABINDEX тэга <A> (задаётся числом в диапазоне от 1 до 32767). <br><p>Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. <br> </div> <div class="image"> <a href="/img/tmb/5/428441/f89b372b7d833ed43fb7dd2f4b0817f4-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Порядок перехода по гиперссылкамПри перемещении с помощью клавиши браузер по умолчанию подсвечивает гиперссылки в порядке их следования в тексте страницы. Изменить порядок перехода можно с помощью атрибута TABINDEX тэга  (задаётся числом в диапазоне от 1 до 32767). Чтобы исключить гиперссылку из перечня, надо присвоить атрибуту любое отрицательное число. "><img src="/img/tmb/5/428441/f89b372b7d833ed43fb7dd2f4b0817f4-800x.jpg" title="Порядок перехода по гиперссылкамПри перемещении с помощью клавиши браузер по умолчанию подсвечивает гиперссылки в порядке" alt=""></a> </div> <hr> </div> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-8 --> <div id="yandex_rtb_R-A-468740-8"></div> <script type="text/javascript"> (function(w, d, n, s, t) { w[n] = w[n] || []; w[n].push(function() { Ya.Context.AdvManager.render({ blockId: "R-A-468740-8", renderTo: "yandex_rtb_R-A-468740-8", async: true }); }); t = d.getElementsByTagName("script")[0]; s = d.createElement("script"); s.type = "text/javascript"; s.src = "//an.yandex.ru/system/context.js"; s.async = true; t.parentNode.insertBefore(s, t); })(this, this.document, "yandexContextAsyncCallbacks"); </script></div> <div class="url" id="download"><a href="/uncategorized/yazyk-gipertekstovoy-razmetki-html-1/download">Скачать презентацию</a></div> </div> <div class="right"> <div class="banners"> <div class="custom" > <!-- Yandex.RTB R-A-468740-2 --> <div id="yandex_rtb_R-A-468740-2"></div> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ renderTo: 'yandex_rtb_R-A-468740-2', blockId: 'R-A-468740-2' }) })</script></div> </div> <div class="list related"> <h2>Похожие презентации</h2> <div class="wrapper"> <a href="/uncategorized/derevyannaya-svadba-fotoalbom"> <img src="/img/tmb/4/371837/e4de6e747d965f72fd260450c40d0936-800x.jpg" alt=""> <span class="desc"> <span>Деревянная свадьба. Фотоальбом</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 251</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/s-dnem-materi-1"> <img src="/img/tmb/2/123214/044582d11e84fa12b31bfc964a58f3eb-800x.jpg" alt=""> <span class="desc"> <span>С днем матери</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 237</span> </span> </a> </div> <div class="custom" > <!-- Yandex.RTB R-A-468740-13 --> <script>window.yaContextCb.push(()=>{ Ya.Context.AdvManager.render({ type: 'fullscreen', blockId: 'R-A-468740-13' }) })</script></div> <div class="wrapper"> <a href="/uncategorized/meropriyatiya-posvyashchennye-godu-literatury"> <img src="/img/tmb/1/2124/0d14567a3e238c58a31b87f7e7b89f0b-800x.jpg" alt=""> <span class="desc"> <span>Мероприятия, посвященные Году литературы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 218</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/tambov-v-gody-velikoy-otechestvennoy-voyny"> <img src="/img/tmb/2/134764/a2eece74d2e4a0ea5063b82edd5891fe-800x.jpg" alt=""> <span class="desc"> <span>ТАМБОВ В ГОДЫ ВЕЛИКОЙ ОТЕЧЕСТВЕННОЙ ВОЙНЫ</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 483</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/domashnie-ptitsy-i-ih-detenyshi"> <img src="/img/tmb/3/291615/7c9e305d0ae9a0f0447bb31da2d871a1-800x.jpg" alt=""> <span class="desc"> <span>Домашние птицы и их детеныши.</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 495</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/federalnyy-gosudarstvennyy-obrazovatelnyy-standart-obshchego-obrazovaniya-proekt-vnedreniya-fgos-v-mou-sosh-n196"> <img src="/img/tmb/2/118891/7cf12badc2b9927a20d0de0268916fc4-800x.jpg" alt=""> <span class="desc"> <span>Федеральный государственный образовательный стандарт общего образования. Проект внедрения ФГОС в МОУ СОШ №196</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 209</span> </span> </a> </div> <div class="clear"></div> </div> </div> </div> </div> </div> <div class="container bottom"> <div> <div class="call_back"> <h4><i class="fas fa-bullhorn"></i>Обратная связь</h4> <p>Если не удалось найти и скачать презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:</p> <p>Email: <a href="#" class="js_hidden_email" data-address="thepresentation" data-domain="ya.ru">Нажмите что бы посмотреть</a> </p> </div> <div class="links"> </div> <div class="whatis"> <h4><i class="fa fa-info text-red"></i>Что такое ThePresentation.ru?</h4> <p>Это сайт презентаций, докладов, проектов, шаблонов в формате PowerPoint. Мы помогаем школьникам, студентам, учителям, преподавателям хранить и обмениваться учебными материалами с другими пользователями.</p> <hr /> <p><a href="/privacy">Для правообладателей</a></p> <a href="https://metrika.yandex.ru/stat/?id=54509641&from=informer" target="_blank" rel="nofollow"><img src="https://informer.yandex.ru/informer/54509641/3_1_FFFFFFFF_EFEFEFFF_0_pageviews" style="width:88px; height:31px; border:0;" alt="Яндекс.Метрика" title="Яндекс.Метрика: данные за сегодня (просмотры, визиты и уникальные посетители)" class="ym-advanced-informer" data-cid="54509641" data-lang="ru" /></a> <!--LiveInternet counter--> <script type="text/javascript"> document.write('<a href="//www.liveinternet.ru/click" '+ 'target="_blank"><img src="//counter.yadro.ru/hit?t16.2;r'+ escape(document.referrer)+((typeof(screen)=='undefined')?'': ';s'+screen.width+'*'+screen.height+'*'+(screen.colorDepth? screen.colorDepth:screen.pixelDepth))+';u'+escape(document.URL)+ ';h'+escape(document.title.substring(0,150))+';'+Math.random()+ '" alt="" title="LiveInternet: показано число просмотров за 24'+ ' часа, посетителей за 24 часа и за сегодня" '+ 'border="0" width="88" height="31"><\/a>') </script> <!--/LiveInternet--> </div> <div class="clear"></div> </div> </div> <script src="/templates/presentation/js/script.js?0ed36ea232886ff4063bbdd9e2c5b9c0"></script> </body> </html>