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

Содержание

Слайд 1План самостоятельной работы для 11 А класса.
1. Прочитать презентацию.
2. Выполнить примеры

на слайдах 14 (Пример 1), 17 (пример 2), слайд 23 (Пример 3). Для примера 3 можно использовать приложенный рисунок «рояль.png» или любой другой.
3. Выполнить и сдать на проверку Задание 1. «Вставка графики, списки» на слайде 24. Текст и рисунки для задания1 в папке «Косметика с грядок»

Слайд 2Язык разметки гипертекста HTML

С его помощью создают Web – страницу.

HTML (аббревиатура

английских слов HyperText Markup Language).

HTML был разработан для того, чтобы подготавливая Web – страницу не надо было думать о различии в программном и аппаратном обеспечении компьютеров, на которых эта страница будет просматриваться.
[‘ma:k’∆p]

Слайд 3Сэр Тимоти Джон Бернерс-Ли; род. 8 июня 1955) — британский) — британский учёный,

изобретатель URI) — британский учёный, изобретатель URI, URL) — британский учёный, изобретатель URI, URL, HTTP) — британский учёный, изобретатель URI, URL, HTTP, HTML) — британский учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины) — британский учёный, изобретатель URI, URL, HTTP, HTML, изобретатель Всемирной паутины (совместно с Робертом Кайо) и действующий глава Консорциума Всемирной паутины.
Автор множества других разработок в области информационных технологий.

Слайд 4В 1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРНВ

1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРН (ЖеневаВ 1978 году проработал в Европейской лаборатории по ядерным исследованиям ЦЕРН (Женева, Швейцария) консультантом по программному обеспечению.
Именно там он для собственных нужд написал программу «Энквайр» (англ. «Enquire», можно вольно перевести как «Дознаватель»), и заложил концептуальную основу для Всемирной паутины.
В 1989 году, работая в CERN над внутренней системой обмена документов ENQUIRE, Бернерс-Ли предложил глобальный гипертекстовый проект, ныне известный как Всемирная паутина. Проект был утверждён и реализован.

Слайд 5Web – страницы, написанные на HTML, просматриваются с помощью специальных программ,

которые наз браузерами.

Основная задача браузера – по запросу пользователя найти требуемый документ в интернете и без искажений отобразить его.
Internet Explorer – браузер, встроенный в операционную систему Windows.

Браузер Netscape Navigator – в начале в www захватил лидерство.


Слайд 6Браузерные войны
В середине 1990-х годов основные производители браузеров – компании Netscape

и Microsoft начали внедрять собственные наборы элементов в HTML разметку.
Создалась путаница из различных конструкций для работы во всемирной паутине, доступных для просмотра то в одном, то в другом браузере.
Благодаря усилиям производителей других браузеров, которые следовали стандартамW3Cможно констатировать рост популярности браузеров Mozilla Firefox, Google Chrome, Opera и другие.
При этом Internet Explorer сохраняет свои позиции.

Слайд 7Тэг обозначает начало действия какой-либо инструкции отображения. Большинство тэгов парные, и

второй тег отменяет действие первого.
Если эта инструкция применяется ко всему документу, то такой тэг не имеет своего закрывающего двойника.
Некоторые теги обладают параметрами, которые уточняют правила отображения содержимого. Параметры могут указываться только в открывающем тэге.

Слайд 8Основные тэги (теги) HTML, которые должны присутствовать в тексте любой Вэб-страницы:

,

располагаемый в самом начале.
Этот тэг (тег) описывает ваш документ как Вэб-страницу, выполненную в формате HTML.

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

В раздел HEAD обычно вложен тэг (тег) , служащий для обозначения наименования страницы. Наименования страниц обычно отображаются в строке заголовка окна браузера. <br>Затем следует тэг (тег) <BODY>, который указывает на начало собственно "тела" Веб-страницы. <br>В этом разделе размещаются все элементы содержимого страницы.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/a18c0f7919d7b1471532a632f6e804c8-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Основные тэги (теги) HTML, которые должны присутствовать в тексте любой Вэб-страницы:, располагаемый в самом начале. Этот тэг (тег) описывает ваш документ как Вэб-страницу, выполненную в формате HTML. За ним следует тэг (тег) , который указывает на наличие текста, содержащего наименование страницы и дополнительные сведения о ней.В раздел HEAD обычно вложен тэг (тег) , служащий для обозначения наименования страницы. Наименования страниц обычно отображаются в строке заголовка окна браузера. Затем следует тэг (тег) , который указывает на начало собственно "тела" Веб-страницы. В этом разделе размещаются все элементы содержимого страницы."><img src="/img/tmb/4/349133/a18c0f7919d7b1471532a632f6e804c8-800x.jpg" title="Основные тэги (теги) HTML, которые должны присутствовать в тексте любой Вэб-страницы:, располагаемый в самом начале." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide9"> <h2><a href="/img/tmb/4/349133/45fac5c55b01e85b9aa30fa3bd2a240e-800x.jpg" target="_blank">Слайд 9</a>Пример:<br> <br><br> Online обучение: HTML<br> <br> Текст сайта <br><br> <br>http://on-line-teaching.com/html/lsn002.html<br></h2> <div class="text"> bgcolor=bleak> зеленый цвет фона<br><body background="PIC_0004.JPG" text="red"> картинка фон, текст страницы красный <br><body background="28130536.GIF" text="red" > <br>background=’’Путь к файлу фона’’<br><marquee>Текст </marquee> Текст будет двигаться поперек экрана<br><p><br> </div> <div class="image"> <a href="/img/tmb/4/349133/45fac5c55b01e85b9aa30fa3bd2a240e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Пример: Online обучение: HTML Текст сайта http://on-line-teaching.com/html/lsn002.html зеленый цвет фона картинка фон, текст страницы красный background=’’Путь к файлу фона’’Текст Текст будет двигаться поперек экрана"><img src="/img/tmb/4/349133/45fac5c55b01e85b9aa30fa3bd2a240e-800x.jpg" title="Пример: Online обучение: HTML Текст сайта http://on-line-teaching.com/html/lsn002.html зеленый цвет фона картинка фон, текст страницы" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide10"> <h2><a href="/img/tmb/4/349133/e7c5d6721f2fb248c2aa631fa3c78866-800x.jpg" target="_blank">Слайд 10</a>Тэги символов:<br> задает полужирное начертание символов<br><br> - курсивные</h2> <div class="text"> символы<br><br><u> </u> - заставляет браузер подчеркивать текст, расположенный между ними<br><br><strike> </strike> перечеркнутый текст<br> </div> <div class="image"> <a href="/img/tmb/4/349133/e7c5d6721f2fb248c2aa631fa3c78866-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Тэги символов: задает полужирное начертание символов - курсивные символы - заставляет браузер подчеркивать текст, расположенный между ними перечеркнутый текст"><img src="/img/tmb/4/349133/e7c5d6721f2fb248c2aa631fa3c78866-800x.jpg" title="Тэги символов: задает полужирное начертание символов - курсивные символы - заставляет браузер подчеркивать текст," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide11"> <h2><a href="/img/tmb/4/349133/7eb1e2890b63385d123413699b8d08c2-800x.jpg" target="_blank">Слайд 11</a>Шрифтовое оформление текста. <br>Атрибуты тега font <br>В любом месте текста можно</h2> <div class="text"> использовать тэг <font> с набором параметров, которые и будут определять внешний вид шрифта, находящегося после этого тэга. Прекращение действия тэга <font> задается тэгом </font>.<br><br>Параметры тэга <font>:<br>size – размер применяемого шрифта<br>color – цвет символов шрифта<br>face – гарнитура (рисунок шрифта)<br> </div> <div class="image"> <a href="/img/tmb/4/349133/7eb1e2890b63385d123413699b8d08c2-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Шрифтовое оформление текста. Атрибуты тега font В любом месте текста можно использовать тэг с набором параметров, которые и будут определять внешний вид шрифта, находящегося после этого тэга. Прекращение действия тэга задается тэгом .Параметры тэга :size – размер применяемого шрифтаcolor – цвет символов шрифтаface – гарнитура (рисунок шрифта)"><img src="/img/tmb/4/349133/7eb1e2890b63385d123413699b8d08c2-800x.jpg" title="Шрифтовое оформление текста. Атрибуты тега font В любом месте текста можно использовать тэг с набором" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide12"> <h2><a href="/img/tmb/4/349133/c3ba771b104898f792437059f0abe2d8-800x.jpg" target="_blank">Слайд 12</a>пятый размер<br>Для установки зеленого цвета символов шрифта используется конструкция:<br><br></h2> <div class="text"> color="green"> или<br><font color="#008000"><br><br>Пример:<br><font size=3 color="#808000"> оливковый </font><br>Пример: <br><font size=4 color="red" fase=" Courier New, Arial Black "><br> </div> <div class="image"> <a href="/img/tmb/4/349133/c3ba771b104898f792437059f0abe2d8-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="пятый размерДля установки зеленого цвета символов шрифта используется конструкция: илиПример: оливковый Пример: "><img src="/img/tmb/4/349133/c3ba771b104898f792437059f0abe2d8-800x.jpg" title="пятый размерДля установки зеленого цвета символов шрифта используется конструкция: илиПример: оливковый" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide13"> <h2><a href="/img/tmb/4/349133/8b50190fe0f9fee246fd439ae1cac96e-800x.jpg" target="_blank">Слайд 13</a><br>Оформление текста<br>Чтобы разбить текст на абзацы, в начале каждого абзаца ставится</h2> <div class="text"> тэг <p>, а в конце – закрывающий тэг </p>. <br>Параметр выравнивания align, который может прижимать абзац к левому или правому краю окна просмотра браузера, центровать его или растягивать слова равномерно по ширине. Для этого исп значения – left, right, center, justify <br> </div> <div class="image"> <a href="/img/tmb/4/349133/8b50190fe0f9fee246fd439ae1cac96e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Оформление текстаЧтобы разбить текст на абзацы, в начале каждого абзаца ставится тэг , а в конце – закрывающий тэг . Параметр выравнивания align, который может прижимать абзац к левому или правому краю окна просмотра браузера, центровать его или растягивать слова равномерно по ширине. Для этого исп значения – left, right, center, justify "><img src="/img/tmb/4/349133/8b50190fe0f9fee246fd439ae1cac96e-800x.jpg" title="Оформление текстаЧтобы разбить текст на абзацы, в начале каждого абзаца ставится тэг , а в" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide14"> <h2><a href="/img/tmb/4/349133/e7063bd034172eeabcf2c7f6ef0f2712-800x.jpg" target="_blank">Слайд 14</a>Пример 1 <br><br><br> <br> Горизонтальное выравнивание абзаца<br> <br> <br>Абзац,</h2> <div class="text"> прижатый к левому краю</p><br><br><p align="Right">Абзац прижатый к парвому краю</p><br><br><p align="center">Центрированный абзац</p><br> <br></body><br></html><br> </div> <div class="image"> <a href="/img/tmb/4/349133/e7063bd034172eeabcf2c7f6ef0f2712-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Пример 1 Горизонтальное выравнивание абзаца Абзац, прижатый к левому краюАбзац прижатый к парвому краюЦентрированный абзац "><img src="/img/tmb/4/349133/e7063bd034172eeabcf2c7f6ef0f2712-800x.jpg" title="Пример 1 Горизонтальное выравнивание абзаца Абзац, прижатый к левому краюАбзац прижатый к парвому краюЦентрированный" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide15"> <h2><a href="/img/tmb/4/349133/e3667f7b9a08bebb949d8f0c9547364f-800x.jpg" target="_blank">Слайд 15</a><br></h2> <div class="image"> <a href="/img/tmb/4/349133/e3667f7b9a08bebb949d8f0c9547364f-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/4/349133/e3667f7b9a08bebb949d8f0c9547364f-800x.jpg" title="" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide16"> <h2><a href="/img/tmb/4/349133/2abfb174900840db300bdb0981f81208-800x.jpg" target="_blank">Слайд 16</a>Линия вставляется в текст HTML – документа с помощью тэга .</h2> <div class="text"> <br>Параметр align задает горизонтальное выравнивание линии. <br>Он может принимать значения – left, right и center, <br>которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. <br><br>Параметр width устанавливает длину горизонтальной линии. По умолчанию используется 100%. Высота линии в пикселах задается с помощью параметра size.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/2abfb174900840db300bdb0981f81208-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Линия вставляется в текст HTML – документа с помощью тэга . Параметр align задает горизонтальное выравнивание линии. Он может принимать значения – left, right и center, которые прижимают горизонтальную линию к левому или правому краю окна просмотра, или центрируют ее, соответственно. Параметр width устанавливает длину горизонтальной линии. По умолчанию используется 100%. Высота линии в пикселах задается с помощью параметра size."><img src="/img/tmb/4/349133/2abfb174900840db300bdb0981f81208-800x.jpg" title="Линия вставляется в текст HTML – документа с помощью тэга . Параметр align задает горизонтальное" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide17"> <h2><a href="/img/tmb/4/349133/5e87653568506ceef3bbf6869a663fd2-800x.jpg" target="_blank">Слайд 17</a><br> <br> ЛИНИИ<br> <br><br>Это обычная линия, отображаемая по умолчанию<br>Это укороченная линия, прижатая</h2> <div class="text"> влево <hr align="left" width="50%" size=5 ></p><br><br><p>Это укороченная линия, по центру<hr align="center" width="50%" size=5></p><br><p>Это укороченная линия, прижатая вправо<hr align="right" width="50%" size=5></p><br></BODY><br></html><br><p>Пример 2.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/5e87653568506ceef3bbf6869a663fd2-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" ЛИНИИ Это обычная линия, отображаемая по умолчаниюЭто укороченная линия, прижатая влево Это укороченная линия, по центруЭто укороченная линия, прижатая вправоПример 2."><img src="/img/tmb/4/349133/5e87653568506ceef3bbf6869a663fd2-800x.jpg" title="ЛИНИИ Это обычная линия, отображаемая по умолчаниюЭто укороченная линия, прижатая влево Это укороченная линия," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide18"> <h2><a href="/img/tmb/4/349133/0c5bfcf6f9275ee7b1ceb61ce281255a-800x.jpg" target="_blank">Слайд 18</a>Графика<br>Браузеры в состоянии отображать только три вида графических файлов: файлы форматов</h2> <div class="text"> GIF, JPEG и PNG. <br>Для внедрения графического файла в состав Web – страницы исп тэг <img> <br><br>Этот тэг не имеет закрывающего двойника.<br><br>Основным и обязательным атрибутом тэга <img> является параметр src. <br>В качестве значения этого атрибута используется адрес вставляемого графического файла и его наименование. <br> </div> <div class="image"> <a href="/img/tmb/4/349133/0c5bfcf6f9275ee7b1ceb61ce281255a-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="ГрафикаБраузеры в состоянии отображать только три вида графических файлов: файлы форматов GIF, JPEG и PNG. Для внедрения графического файла в состав Web – страницы исп тэг Этот тэг не имеет закрывающего двойника.Основным и обязательным атрибутом тэга является параметр src. В качестве значения этого атрибута используется адрес вставляемого графического файла и его наименование. "><img src="/img/tmb/4/349133/0c5bfcf6f9275ee7b1ceb61ce281255a-800x.jpg" title="ГрафикаБраузеры в состоянии отображать только три вида графических файлов: файлы форматов GIF, JPEG и PNG." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide19"> <h2><a href="/img/tmb/4/349133/a39d0797c8a4999653a989ef8e6df211-800x.jpg" target="_blank">Слайд 19</a>На сегодняшний день формат GIF (Graphics Interchange Format) – самый основной</h2> <div class="text"> в Internet. <br>Обусловлено это тем, что файлы картинок, сохраненные в формате GIF очень компактны. GIF плотно сжимает графический файл. При этом на качестве самой картинки подобное сжатие практически не отражается. <br>Этот формат позволяет определять в исходной картинке прозрачные цвета, т.е. части картинки при ее просмотре в обозревателе становятся невидимыми.<br> GIF позволяет сохранять анимированные изображения.<br>У конкурента GIF – формата JPEG имеется только одно очевидное преимущество: JPEG способен работать не только с 256 цветами, а с полноцветными картинками с 16 миллионами цветов.<br>Количество цветов GIF от 2 до 256.<br>Итак GIF – рисунки, JPEG – фотографии.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/a39d0797c8a4999653a989ef8e6df211-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="На сегодняшний день формат GIF (Graphics Interchange Format) – самый основной в Internet. Обусловлено это тем, что файлы картинок, сохраненные в формате GIF очень компактны. GIF плотно сжимает графический файл. При этом на качестве самой картинки подобное сжатие практически не отражается. Этот формат позволяет определять в исходной картинке прозрачные цвета, т.е. части картинки при ее просмотре в обозревателе становятся невидимыми. GIF позволяет сохранять анимированные изображения.У конкурента GIF – формата JPEG имеется только одно очевидное преимущество: JPEG способен работать не только с 256 цветами, а с полноцветными картинками с 16 миллионами цветов.Количество цветов GIF от 2 до 256.Итак GIF – рисунки, JPEG – фотографии."><img src="/img/tmb/4/349133/a39d0797c8a4999653a989ef8e6df211-800x.jpg" title="На сегодняшний день формат GIF (Graphics Interchange Format) – самый основной в Internet. Обусловлено это" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide20"> <h2><a href="/img/tmb/4/349133/bd06c3c5b09d53d4e27fac2c3716ac31-800x.jpg" target="_blank">Слайд 20</a><br> <br> Рисунки в тексте<br> <br> <br>Это текст, который обтекает</h2> <div class="text"> рисунок.<br><img src="/ris/animat/J0189207.gif"><br>Другой текст и он тоже обтекает этот рисунок.<br></p><br> </body><br></html><br><p>Пример 3<br> </div> <div class="image"> <a href="/img/tmb/4/349133/bd06c3c5b09d53d4e27fac2c3716ac31-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Рисунки в тексте Это текст, который обтекает рисунок.Другой текст и он тоже обтекает этот рисунок. Пример 3"><img src="/img/tmb/4/349133/bd06c3c5b09d53d4e27fac2c3716ac31-800x.jpg" title="Рисунки в тексте Это текст, который обтекает рисунок.Другой текст и он тоже обтекает" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide21"> <h2><a href="/img/tmb/4/349133/a2f95ad711dfba762c0fa4e19ac55802-800x.jpg" target="_blank">Слайд 21</a></h2> <div class="image"> <a href="/img/tmb/4/349133/a2f95ad711dfba762c0fa4e19ac55802-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/4/349133/a2f95ad711dfba762c0fa4e19ac55802-800x.jpg" title="" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide22"> <h2><a href="/img/tmb/4/349133/f2e28a45a603e56168f35d32b1805edf-800x.jpg" target="_blank">Слайд 22</a>Размеры рисунка задают при помощи параметров height и width. <br><br>Тэг для</h2> <div class="text"> размещения рис 30% от родительского: <br> <img width="30%" src="/ris/phot2/J0316725.jpg"><br><br>Для выравнивания графического объекта относительно обтекающего его текста используется параметр align. <br>Значения bottom, middle и top применяют для позиционирования первой строки текста, обтекающего рисунок по вертикали.<br>Значение top смещает ее вверх, bottom – вниз, middle – центрует строку по вертикали.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/f2e28a45a603e56168f35d32b1805edf-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Размеры рисунка задают при помощи параметров height и width. Тэг для размещения рис 30% от родительского: Для выравнивания графического объекта относительно обтекающего его текста используется параметр align. Значения bottom, middle и top применяют для позиционирования первой строки текста, обтекающего рисунок по вертикали.Значение top смещает ее вверх, bottom – вниз, middle – центрует строку по вертикали."><img src="/img/tmb/4/349133/f2e28a45a603e56168f35d32b1805edf-800x.jpg" title="Размеры рисунка задают при помощи параметров height и width. Тэг для размещения рис 30% от" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide23"> <h2><a href="/img/tmb/4/349133/59a55123c23d817712997a8db04fa239-800x.jpg" target="_blank">Слайд 23</a>Пример 3.<br> <br> Рисунки в тексте<br> </h2> <div class="text"> <body><br><p>Это рояль.<img src="/ris/animat/J0189207.gif" align="left"></p><br><p>Старинный клавишный нструмент.</p><br><p>Если поднять крышку рояля, </p> то звук станет громче,<br><p>колоритнее, богаче обертонами.</p><br> </body> </html><br><p><br> </div> <div class="image"> <a href="/img/tmb/4/349133/59a55123c23d817712997a8db04fa239-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Пример 3. Рисунки в тексте Это рояль.Старинный клавишный нструмент.Если поднять крышку рояля, то звук станет громче,колоритнее, богаче обертонами. "><img src="/img/tmb/4/349133/59a55123c23d817712997a8db04fa239-800x.jpg" title="Пример 3. Рисунки в тексте Это рояль.Старинный клавишный нструмент.Если поднять крышку рояля," alt=""></a> </div> <hr> </div> <div class="descrip" id="slide24"> <h2><a href="/img/tmb/4/349133/678c7c98fa6b157d037c22a4eba56f86-800x.jpg" target="_blank">Слайд 24</a>Задание 1. Вставка графики, списки.<br></h2> <div class="text"> </div> <div class="image"> <a href="/img/tmb/4/349133/678c7c98fa6b157d037c22a4eba56f86-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Задание 1. Вставка графики, списки."><img src="/img/tmb/4/349133/678c7c98fa6b157d037c22a4eba56f86-800x.jpg" title="Задание 1. Вставка графики, списки." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide25"> <h2><a href="/img/tmb/4/349133/961fba018da67cb875978ade1256ef1e-800x.jpg" target="_blank">Слайд 25</a>Примеры тэгов<br><br>1. </h2> <div class="text"> Arial Black "><br><br>2. <p align="center">Основной текст</p><br><p><hr align="left" width="50%" size=5 ><br><br>4. <img width="30%“ src="/ris/phot2/J0316725.jpg"><br><br> </div> <div class="image"> <a href="/img/tmb/4/349133/961fba018da67cb875978ade1256ef1e-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Примеры тэгов1. 2. Основной текст4. "><img src="/img/tmb/4/349133/961fba018da67cb875978ade1256ef1e-800x.jpg" title="Примеры тэгов1. 2. Основной текст4." alt=""></a> </div> <hr> </div> <div class="descrip" id="slide26"> <h2><a href="/img/tmb/4/349133/6e6e56d2254cdd1da742b41e2a9cd21b-800x.jpg" target="_blank">Слайд 26</a>Таблицы – важнейшая форма организации информации, располагающейся на Web – страницах.<br>Это</h2> <div class="text"> единственное средство некоей верстки страниц.<br>В HTML не встроены средства точного позиционирования элементов оформления Web – страниц, поэтому таблицы пришлись как нельзя кстати. <br>Их можно распространить на всю страницу, и уже в ячейках таблиц размещать элементы оформления Web – страниц. <br>В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки.<br>Явного объекта, обозначающего столбец таблицы нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица целиком.<br> </div> <div class="image"> <a href="/img/tmb/4/349133/6e6e56d2254cdd1da742b41e2a9cd21b-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблицы – важнейшая форма организации информации, располагающейся на Web – страницах.Это единственное средство некоей верстки страниц.В HTML не встроены средства точного позиционирования элементов оформления Web – страниц, поэтому таблицы пришлись как нельзя кстати. Их можно распространить на всю страницу, и уже в ячейках таблиц размещать элементы оформления Web – страниц. В HTML таблица разбивается на строки, а те, в свою очередь, на ячейки.Явного объекта, обозначающего столбец таблицы нет. Количество столбцов рассчитывается браузером на основе анализа строк таблицы, а затем уже отображается вся таблица целиком."><img src="/img/tmb/4/349133/6e6e56d2254cdd1da742b41e2a9cd21b-800x.jpg" title="Таблицы – важнейшая форма организации информации, располагающейся на Web – страницах.Это единственное средство некоей верстки" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide27"> <h2><a href="/img/tmb/4/349133/638b32463d3ca07591220d2f4eecac05-800x.jpg" target="_blank">Слайд 27</a>Таблица находится между тэгами и .<br>Тэг имеет много параметров.<br><br></h2> <div class="text"> </tr> задает строку таблицы<br><br><td> </td>ограничивает столбец<br><border> указывает ширину границы таблицы. <br>Параметр cellspacing определяет размер в пикселах между отдельными ячейками страницы, <br>cellpadding – размер отступа содержимого ячейки от ее границы, <br>align задает горизонтальное выравнивание таблицы (left, center, right).<br> </div> <div class="image"> <a href="/img/tmb/4/349133/638b32463d3ca07591220d2f4eecac05-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Таблица находится между тэгами и .Тэг имеет много параметров. задает строку таблицы ограничивает столбец указывает ширину границы таблицы. Параметр cellspacing определяет размер в пикселах между отдельными ячейками страницы, cellpadding – размер отступа содержимого ячейки от ее границы, align задает горизонтальное выравнивание таблицы (left, center, right)."><img src="/img/tmb/4/349133/638b32463d3ca07591220d2f4eecac05-800x.jpg" title="Таблица находится между тэгами и .Тэг имеет много параметров. задает строку таблицы ограничивает столбец указывает" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide28"> <h2><a href="/img/tmb/4/349133/f386c7af9923908f56b4e6e8092b6cbf-800x.jpg" target="_blank">Слайд 28</a><br><br>это обычный текст.<br> <br><br>123<br><br><br>456<br><br> </h2> <div class="text"> <br></body><br></html><br> </div> <div class="image"> <a href="/img/tmb/4/349133/f386c7af9923908f56b4e6e8092b6cbf-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="это обычный текст. 123456 "><img src="/img/tmb/4/349133/f386c7af9923908f56b4e6e8092b6cbf-800x.jpg" title="это обычный текст. 123456" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide29"> <h2><a href="/img/tmb/4/349133/bfc4f0a6221a5e5422507095fd0278a1-800x.jpg" target="_blank">Слайд 29</a>Параметры табличных тэгов:<br>bgcolor = gray закрасить ячейку в заданный (серый)цвет </h2> <div class="text"> silver (серебристый) <br>colspan (= 2 количество ячеек, объединяемых по горизонтали)<br>rowspan (= 2 сколько строк по вертикали объединены)<br><p>Чтобы объединить 2 строки:<br><td rowspan=2 align=center>Количество</td><br><p>Чтобы объединить 2 столбца:<br><td colspan=2 >Итого</td><br> </div> <div class="image"> <a href="/img/tmb/4/349133/bfc4f0a6221a5e5422507095fd0278a1-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption="Параметры табличных тэгов:bgcolor = gray закрасить ячейку в заданный (серый)цвет silver (серебристый) colspan (= 2 количество ячеек, объединяемых по горизонтали)rowspan (= 2 сколько строк по вертикали объединены)Чтобы объединить 2 строки:КоличествоЧтобы объединить 2 столбца:Итого"><img src="/img/tmb/4/349133/bfc4f0a6221a5e5422507095fd0278a1-800x.jpg" title="Параметры табличных тэгов:bgcolor = gray закрасить ячейку в заданный (серый)цвет" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide30"> <h2><a href="/img/tmb/4/349133/3f8a967459588a2e8b96c9ea96530977-800x.jpg" target="_blank">Слайд 30</a><br></h2> <div class="image"> <a href="/img/tmb/4/349133/3f8a967459588a2e8b96c9ea96530977-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=""><img src="/img/tmb/4/349133/3f8a967459588a2e8b96c9ea96530977-800x.jpg" title="" alt=""></a> </div> <hr> </div> <div class="descrip" id="slide31"> <h2><a href="/img/tmb/4/349133/c6506309782398de8072d2c576394216-800x.jpg" target="_blank">Слайд 31</a> <br> Остатки товара на складах<br><br><br><br> </h2> <div class="text"> <tr><br><td rowspan=2 align=center>ТМЦ</td> <br><td rowspan=2>Себестоимость</td> <br><td colspan=2>Бытовая техника</td><br><td colspan=2>Все для дома</td><br> </tr><br><br><tr><br><td bgcolor=silver>Кол-во</td> <td bgcolor=silver>Сумма</td> <td bgcolor=silver>Кол-во</td> <td bgcolor=silver>Сумма</td><br> </tr><br> </div> <div class="image"> <a href="/img/tmb/4/349133/c6506309782398de8072d2c576394216-800x.jpg" class="js_fancybox" data-fancybox="slides" data-caption=" Остатки товара на складах ТМЦ Себестоимость Бытовая техникаВсе для дома Кол-во Сумма Кол-во Сумма "><img src="/img/tmb/4/349133/c6506309782398de8072d2c576394216-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-razmetki-giperteksta-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/urussinskaya-srednyaya-obshcheobrazovatelnaya-shkola-n2-yutazinskogo-munitsipalnogo-rayona-respubliki-tatarstan"> <img src="/img/tmb/2/168980/0ceca814287f8cfc50a9d3337113f9fc-800x.jpg" alt=""> <span class="desc"> <span>Уруссинская средняя общеобразовательная школа №2 Ютазинского муниципального района Республики Татарстан</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 219</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/apparat-aster"> <img src="/img/tmb/2/171161/7ee226f83e25e50bf98dbcb774d06168-800x.jpg" alt=""> <span class="desc"> <span>Аппарат Астер</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 285</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/vyyavlenie-urovnya-razvitiya-transporta-naukifinansovotdyha-i-turizma-zarubezhnoy-evropy-1"> <img src="/img/tmb/4/382996/024ba00e4f2ef56595da81ebe20b15b2-800x.jpg" alt=""> <span class="desc"> <span>Выявление уровня развития транспорта, науки,финансов,отдыха и туризма Зарубежной Европы</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 229</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/four-new-ways-to-chill-computer-chips"> <img src="/img/tmb/3/241580/a3eb7b33e6012d254f8fec205170af61-800x.jpg" alt=""> <span class="desc"> <span>Four new ways to chill computer chips</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 204</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/mathcadnovyy-standart-inzhenernyh-raschetov-novye-vozmozhnosti-otdela-prodazh"> <img src="/img/tmb/3/256910/49a662c9f255fbcd71d3a18456f8d206-800x.jpg" alt=""> <span class="desc"> <span>Mathcad – новый стандарт инженерных расчетов. Новые возможности отдела продаж</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 267</span> </span> </a> </div> <div class="wrapper"> <a href="/uncategorized/remotely-controlling-devices"> <img src="/img/tmb/5/454223/4e0f5d00d86376d2b336b5454b54acb6-800x.jpg" alt=""> <span class="desc"> <span>Remotely Controlling Devices</span> <span class="views"><i class="fa fa-eye" aria-hidden="true"></i> 253</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>