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

Категория: Устройства и комплектующие
Нажмите для полного просмотра!
Язык гипертекстовой разметки HTML, слайд №1Язык гипертекстовой разметки HTML, слайд №2Язык гипертекстовой разметки HTML, слайд №3Язык гипертекстовой разметки HTML, слайд №4Язык гипертекстовой разметки HTML, слайд №5Язык гипертекстовой разметки HTML, слайд №6Язык гипертекстовой разметки HTML, слайд №7Язык гипертекстовой разметки HTML, слайд №8Язык гипертекстовой разметки HTML, слайд №9Язык гипертекстовой разметки HTML, слайд №10Язык гипертекстовой разметки HTML, слайд №11Язык гипертекстовой разметки HTML, слайд №12Язык гипертекстовой разметки HTML, слайд №13Язык гипертекстовой разметки HTML, слайд №14Язык гипертекстовой разметки HTML, слайд №15Язык гипертекстовой разметки HTML, слайд №16Язык гипертекстовой разметки HTML, слайд №17Язык гипертекстовой разметки HTML, слайд №18Язык гипертекстовой разметки HTML, слайд №19Язык гипертекстовой разметки HTML, слайд №20Язык гипертекстовой разметки HTML, слайд №21Язык гипертекстовой разметки HTML, слайд №22Язык гипертекстовой разметки HTML, слайд №23Язык гипертекстовой разметки HTML, слайд №24Язык гипертекстовой разметки HTML, слайд №25Язык гипертекстовой разметки HTML, слайд №26Язык гипертекстовой разметки HTML, слайд №27Язык гипертекстовой разметки HTML, слайд №28Язык гипертекстовой разметки HTML, слайд №29Язык гипертекстовой разметки HTML, слайд №30Язык гипертекстовой разметки HTML, слайд №31Язык гипертекстовой разметки HTML, слайд №32Язык гипертекстовой разметки HTML, слайд №33Язык гипертекстовой разметки HTML, слайд №34Язык гипертекстовой разметки HTML, слайд №35Язык гипертекстовой разметки HTML, слайд №36Язык гипертекстовой разметки HTML, слайд №37Язык гипертекстовой разметки HTML, слайд №38Язык гипертекстовой разметки HTML, слайд №39Язык гипертекстовой разметки HTML, слайд №40Язык гипертекстовой разметки HTML, слайд №41Язык гипертекстовой разметки HTML, слайд №42Язык гипертекстовой разметки HTML, слайд №43Язык гипертекстовой разметки HTML, слайд №44
Скачать

Содержание ▲

Вы можете ознакомиться и скачать презентацию на тему Язык гипертекстовой разметки HTML. Доклад-сообщение содержит 44 слайдов. Презентации для любого класса можно скачать бесплатно. Если материал и наш сайт презентаций Mypresentation Вам понравились – поделитесь им с друзьями с помощью социальных кнопок и добавьте в закладки в своем браузере.

Слайды и текст этой презентации

Слайд 1


Язык гипертекстовой разметки HTML
Описание слайда:
Язык гипертекстовой разметки HTML

Слайд 2


ТЭги
Описание слайда:
ТЭги

Слайд 3


Синтаксис <тег атрибут1="значение" атрибут2="значение"> <тег атрибут1="значение" атрибут2="значение">...</тег> Теги бывают двух типов — одиночные и парные (контейнеры). Парный тэг может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Атрибуты подразделяются на обязательные и необязательные.
Описание слайда:
Синтаксис <тег атрибут1="значение" атрибут2="значение"> <тег атрибут1="значение" атрибут2="значение">...</тег> Теги бывают двух типов — одиночные и парные (контейнеры). Парный тэг может включать внутри себя другие теги или текст. У тегов допустимы различные атрибуты, которые разделяются между собой пробелом. Атрибуты подразделяются на обязательные и необязательные.

Слайд 4


синтаксис Парные теги состоят из двух частей: открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный<тег>, а в закрывающем используется слэш</тег>. Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head>.
Описание слайда:
синтаксис Парные теги состоят из двух частей: открывающий и закрывающий тег. Открывающий тег обозначается как и одиночный<тег>, а в закрывающем используется слэш</тег>. Существует определенная иерархия вложенности тегов. Например, тег <title> должен находиться внутри контейнера <head>.

Слайд 5


Пример простого документа HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> </body> </html>
Описание слайда:
Пример простого документа HTML 4.01IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Пример веб-страницы</title> </head> <body> </body> </html>

Слайд 6


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

Слайд 7


Блочные элементы (div) Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Тег<p>определяет абзац (параграф) текста.
Описание слайда:
Блочные элементы (div) Блочные элементы характеризуются тем, что занимают всю доступную ширину, высота элемента определяется его содержимым, и он всегда начинается с новой строки. Тег <div> относится к универсальным блочным контейнерам и применяется в тех случаях, где нужны блочные элементы без дополнительных свойств. Тег<p>определяет абзац (параграф) текста.

Слайд 8


Блочные элементы (заголовки) HTML предлагает шесть текстовых заголовков разного уровня. Теги<h1>...<h6>относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.
Описание слайда:
Блочные элементы (заголовки) HTML предлагает шесть текстовых заголовков разного уровня. Теги<h1>...<h6>относятся к блочным элементам, они всегда начинаются с новой строки, а после них другие элементы отображаются на следующей строке. Кроме того, перед заголовком и после него добавляется пустое пространство.

Слайд 9


Строчные элементы Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.
Описание слайда:
Строчные элементы Строчными называются такие элементы веб-страницы, которые являются непосредственной частью другого элемента, например, текстового абзаца. Тег <a> является одним из важных элементов HTML и предназначен для создания ссылок. В зависимости от присутствия атрибутов name или href тег <a> устанавливает ссылку или якорь.

Слайд 10


Строчные элементы Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой. Универсальный тег<span>, предназначен для определения строчного элемента внутри документа. Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.
Описание слайда:
Строчные элементы Тег <br> устанавливает перевод строки в том месте, где этот тег находится. В отличие от тега параграфа <p>, использование тега <br> не добавляет пустой отступ перед строкой. Универсальный тег<span>, предназначен для определения строчного элемента внутри документа. Тег <strong> предназначен для акцентирования текста. Браузеры отображают такой текст жирным начертанием.

Слайд 11


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

Слайд 12


Универсальные элементы Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый. Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>. Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.
Описание слайда:
Универсальные элементы Тег <del> используется для выделения текста, который был удален в новой версии документа. Подобное форматирование позволяет отследить, какие изменения в тексте документа были сделаны. Браузеры обычно помечают текст в контейнере <del> как перечеркнутый. Тег <ins> предназначен для акцентирования вновь добавленного текста и обычно применяется наряду с тегом <del>. Браузеры помечают содержимое контейнера <ins> подчеркиванием текста.

Слайд 13


Тэги для списков Тег <ol> устанавливает тип нумерованного списка, т.е. каждый элемент списка начинается с числа или буквы и увеличивается. Тег<ul> устанавливает тип маркированного список, каждый элемент которого начинается с маркера. Тег <li> определяет отдельный элемент списка внутри внешнего тега<ul> или <ol>.
Описание слайда:
Тэги для списков Тег <ol> устанавливает тип нумерованного списка, т.е. каждый элемент списка начинается с числа или буквы и увеличивается. Тег<ul> устанавливает тип маркированного список, каждый элемент которого начинается с маркера. Тег <li> определяет отдельный элемент списка внутри внешнего тега<ul> или <ol>.

Слайд 14


Тэги для таблиц Тег <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Тег <td> предназначен для создания одной ячейки таблицы и должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <tr> служит контейнером для создания строки таблицы.
Описание слайда:
Тэги для таблиц Тег <table> служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются с помощью тегов <tr> и <td>. Тег <td> предназначен для создания одной ячейки таблицы и должен размещаться внутри контейнера <tr>, который в свою очередь располагается внутри тега <table>. Тег <th> предназначен для создания одной ячейки таблицы, которая обозначается как заголовочная. Текст в такой ячейке отображается браузером обычно жирным шрифтом и выравнивается по центру. Тег <tr> служит контейнером для создания строки таблицы.

Слайд 15


Атрибуты тэгов
Описание слайда:
Атрибуты тэгов

Слайд 16


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

Слайд 17


Цвет В HTML цвет задается или с помощью шестнадцатеричного кода или по названию цвета. <body bgcolor="teal" text="#ffffff"> <p>Текст</p> </body>
Описание слайда:
Цвет В HTML цвет задается или с помощью шестнадцатеричного кода или по названию цвета. <body bgcolor="teal" text="#ffffff"> <p>Текст</p> </body>

Слайд 18


размеры В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. При использовании пикселов в качестве значений пишется только число без указания единиц, например:width="380". Процентная запись привязывается к размерам определенного контейнера. Если контейнер явно не задан, тогда за отсчет принимается окно браузера. После численного значения атрибута добавляется символ % (width="40%«).
Описание слайда:
размеры В HTML размеры элементов или расстояния между ними задаются в пикселах или процентах. При использовании пикселов в качестве значений пишется только число без указания единиц, например:width="380". Процентная запись привязывается к размерам определенного контейнера. Если контейнер явно не задан, тогда за отсчет принимается окно браузера. После численного значения атрибута добавляется символ % (width="40%«).

Слайд 19


Адреса Адресом называется путь к документу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <img> адрес используется в качестве значения атрибута src. Синонимом адреса выступает URL (Universal Resource Locator – универсальный указатель ресурсов).
Описание слайда:
Адреса Адресом называется путь к документу. Адрес необходим в тех случаях, когда делается ссылка на веб-страницу или загружается определенный файл. Например, в теге <img> адрес используется в качестве значения атрибута src. Синонимом адреса выступает URL (Universal Resource Locator – универсальный указатель ресурсов).

Слайд 20


Адреса (абсолютные) Различают абсолютные и относительные адреса. Абсолютные адреса начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol – протокол передачи гипертекста). Абсолютные адреса применяются для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта. <p><a href="http://htmlbook.ru/html/body"> Описание тега BODY</a></p>
Описание слайда:
Адреса (абсолютные) Различают абсолютные и относительные адреса. Абсолютные адреса начинаются всегда с указания протокола передачи данных. Для веб-страниц это обычно HTTP (HyperText Transfer Protocol – протокол передачи гипертекста). Абсолютные адреса применяются для указания на другой сетевой ресурс и достаточно редко используются в рамках одного сайта. <p><a href="http://htmlbook.ru/html/body"> Описание тега BODY</a></p>

Слайд 21


Адреса (относительные ) Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта (/images/pic.gif). Ссылка указывает на рисунок pic.gif, который находится в папке images, размещенной в корне сайта.
Описание слайда:
Адреса (относительные ) Относительные адреса указываются от корня сайта или текущего документа. Например, код <img src="pic.gif"> означает загрузить графический файл с именем pic.gif, который располагается в той же папке, что и сама веб-страница. Слэш (символ /) перед адресом говорит о том, что адресация начинается от корня сайта (/images/pic.gif). Ссылка указывает на рисунок pic.gif, который находится в папке images, размещенной в корне сайта.

Слайд 22


Адреса (относительные ) Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта (../help/me.html). Если перед именем папки нет никаких дополнительных символов, то она размещена внутри текущего каталога (manual/info.html).
Описание слайда:
Адреса (относительные ) Две точки перед именем указывают браузеру перейти на уровень выше в списке каталогов сайта (../help/me.html). Если перед именем папки нет никаких дополнительных символов, то она размещена внутри текущего каталога (manual/info.html).

Слайд 23


Особенности работы с текстом Любое количество пробелов идущих подряд, в браузере отображается как один. Исключением из этого правила является тег <pre>, внутри которого любое число пробелов отображается именно так, как оно указано в коде. Нет расстановки переносов слов в тексте. Это условие несущественно, пока не используется выравнивание текста по ширине.
Описание слайда:
Особенности работы с текстом Любое количество пробелов идущих подряд, в браузере отображается как один. Исключением из этого правила является тег <pre>, внутри которого любое число пробелов отображается именно так, как оно указано в коде. Нет расстановки переносов слов в тексте. Это условие несущественно, пока не используется выравнивание текста по ширине.

Слайд 24


Абзац Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Каждый абзац помещается в тег <p> </p>. В местах переноса строк можно добавлять тег переноса строки <br>. Он не создает вертикальных отступов между строками.
Описание слайда:
Абзац Как правило, блоки текста разделяют между собой абзацами (параграфами). По умолчанию между параграфами существует небольшой вертикальный отступ, называемый отбивкой. Каждый абзац помещается в тег <p> </p>. В местах переноса строк можно добавлять тег переноса строки <br>. Он не создает вертикальных отступов между строками.

Слайд 25


Выравнивание Наиболее распространенный вариант — выравнивание по левому краю. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. При использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы. Для установки выравнивания текста обычно используется тег параграфа <p> с атрибутом align.
Описание слайда:
Выравнивание Наиболее распространенный вариант — выравнивание по левому краю. Выравнивание по правому краю и по центру в основном используется в заголовках и подзаголовках. При использовании выравнивания по ширине, в тексте между словами могут появиться большие интервалы. Для установки выравнивания текста обычно используется тег параграфа <p> с атрибутом align.

Слайд 26


начертание <b>Жирное начертание шрифта</b> <strong>Сильное выделение текста</strong <i>Курсивное начертание шрифта</i> <em>Выделение текста</em>
Описание слайда:
начертание <b>Жирное начертание шрифта</b> <strong>Сильное выделение текста</strong <i>Курсивное начертание шрифта</i> <em>Выделение текста</em>

Слайд 27


Ссылки <a href="URL">текст ссылки</a> URL – относительный или абсолютный адрес ссылки. Текст ссылки по умолчанию становится синего цвета и подчеркивается. Любая ссылка на веб-странице может находиться в одном из следующих состояний: непосещенная, активная и посещенная.
Описание слайда:
Ссылки <a href="URL">текст ссылки</a> URL – относительный или абсолютный адрес ссылки. Текст ссылки по умолчанию становится синего цвета и подчеркивается. Любая ссылка на веб-странице может находиться в одном из следующих состояний: непосещенная, активная и посещенная.

Слайд 28


Ссылки По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target. <a target="имя окна">...</a>
Описание слайда:
Ссылки По умолчанию, при переходе по ссылке документ открывается в текущем окне или фрейме. При необходимости, это условие может быть изменено атрибутом target. <a target="имя окна">...</a>

Слайд 29


Ссылки (продолжение) В качестве зарезервированных имен применяются следующие: _blank — загружает страницу в новое окно браузера _self — загружает страницу в текущее окно (это значение по умолчанию) _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение _self _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение _self.
Описание слайда:
Ссылки (продолжение) В качестве зарезервированных имен применяются следующие: _blank — загружает страницу в новое окно браузера _self — загружает страницу в текущее окно (это значение по умолчанию) _parent — загружает страницу во фрейм-родитель, если фреймов нет, то это значение _self _top — отменяет все фреймы и загружает страницу в полном окне браузера, если фреймов нет, то это значение _self.

Слайд 30


Ссылки (продолжение) Атрибут title добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут. Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты.
Описание слайда:
Ссылки (продолжение) Атрибут title добавляет поясняющий текст к ссылке в виде всплывающей подсказки. Цвета и оформления всплывающей подсказки зависят от настроек операционной системы и браузера, и меняться разработчиком не могут. Создание ссылки на адрес электронной почты делается почти также как и ссылка на веб-страницу. Только вместо URL указывается mailto:адрес электронной почты.

Слайд 31


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

Слайд 32


Якоря (продолжение) Для создания якоря сначала делается закладка с именем при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди. <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Наверх</a></p>
Описание слайда:
Якоря (продолжение) Для создания якоря сначала делается закладка с именем при помощи атрибута name тега <a>. В качестве значения href для перехода к этому якорю используется имя закладки с символом решетки (#) впереди. <p><a name="top"></a></p> <p>...</p> <p><a href="#top">Наверх</a></p>

Слайд 33


Изображения Чем меньше размер графического файла, встроенного в документ, тем быстрее отобразится изображение. Размер изображения необходимо ограничить по ширине, чтобы оно помещалось в окно браузера без полос прокрутки.
Описание слайда:
Изображения Чем меньше размер графического файла, встроенного в документ, тем быстрее отобразится изображение. Размер изображения необходимо ограничить по ширине, чтобы оно помещалось в окно браузера без полос прокрутки.

Слайд 34


Формат изображений Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве определили их как стандарт веб-изображений. Формат PNG также поддерживается браузерами при добавлении изображений. Однако по популярности PNG сильно уступает форматам GIF и JPEG.
Описание слайда:
Формат изображений Широкое распространение для веб-графики получили два формата — GIF и JPEG. Их многофункциональность, универсальность, небольшой объем исходных файлов при достаточном для сайта качестве определили их как стандарт веб-изображений. Формат PNG также поддерживается браузерами при добавлении изображений. Однако по популярности PNG сильно уступает форматам GIF и JPEG.

Слайд 35


Формат изображений (Gif) GIF использует 8-битовый индексированный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. Количество цветов в изображении может быть от 2 до 256 (любые цвета из 24-битной палитры) файл в формате GIF может содержать прозрачные участки поддерживает покадровую смену изображений для создания баннеров и простой анимации использует свободный от потерь метод сжатия.
Описание слайда:
Формат изображений (Gif) GIF использует 8-битовый индексированный цвет и эффективно сжимает сплошные цветные области, при этом сохраняя детали изображения. Количество цветов в изображении может быть от 2 до 256 (любые цвета из 24-битной палитры) файл в формате GIF может содержать прозрачные участки поддерживает покадровую смену изображений для создания баннеров и простой анимации использует свободный от потерь метод сжатия.

Слайд 36


Формат изображений (JPEG) JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями. Метод сжатия может внести искажения в рисунок, содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность.
Описание слайда:
Формат изображений (JPEG) JPEG поддерживает 24-битовый цвет и сохраняет яркость и оттенки цветов в фотографиях неизменными. Данный формат называют сжатием с потерями. Метод сжатия может внести искажения в рисунок, содержащий текст, мелкие детали или четкие края. Формат JPEG не поддерживает прозрачность.

Слайд 37


Тег <img> Общий синтаксис добавления изображения: <img src="URL" alt="альтернативный текст"> Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании. Текст в атрибуте alt обязательно должен быть взят в кавычки.
Описание слайда:
Тег <img> Общий синтаксис добавления изображения: <img src="URL" alt="альтернативный текст"> Альтернативный текст позволяет получить текстовую информацию о рисунке при отключенном в браузере показе картинок или во время их загрузки. Такой текст появляется раньше самого изображения и дает представление об его содержании. Текст в атрибуте alt обязательно должен быть взят в кавычки.

Слайд 38


Тег <img> (продолжение) Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены атрибуты width (ширина) и height (высота): <p><img src="images/figure.jpg" width="100" height="111" alt="Винни-Пух"></p> Если размеры изображения указаны явно, то браузер использует их для того, чтобы отображать соответствующую картинке пустую область в процессе загрузки документа.
Описание слайда:
Тег <img> (продолжение) Для изменения размеров рисунка средствами HTML у тега <img> предусмотрены атрибуты width (ширина) и height (высота): <p><img src="images/figure.jpg" width="100" height="111" alt="Винни-Пух"></p> Если размеры изображения указаны явно, то браузер использует их для того, чтобы отображать соответствующую картинке пустую область в процессе загрузки документа.

Слайд 39


Списки Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.
Описание слайда:
Списки Списком называется взаимосвязанный набор отдельных фраз или предложений, которые начинаются с маркера или цифры. Любой список представляет собой контейнер <ul>, который устанавливает маркированный список, или <ol>, определяющий список нумерованный. Каждый элемент списка должен начинаться с тега <li>.

Слайд 40


Маркированный Список <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> Для выбора стиля маркера используется атрибут type тега <ul>. Маркеры могут принимать один из трех видов: disc, circle и square.
Описание слайда:
Маркированный Список <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ul> Для выбора стиля маркера используется атрибут type тега <ul>. Маркеры могут принимать один из трех видов: disc, circle и square.

Слайд 41


Нумерованный список <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> Если не указывать никаких дополнительных атрибутов и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами .
Описание слайда:
Нумерованный список <ol> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> </ol> Если не указывать никаких дополнительных атрибутов и просто написать тег <ol>, то по умолчанию применяется список с арабскими числами .

Слайд 42


таблицы C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>.
Описание слайда:
таблицы C помощью таблиц удобно верстать макеты страниц, расположив нужным образом фрагменты текста и изображений. Для добавления таблицы на веб-страницу используется тег <table>. Этот элемент служит контейнером для элементов, определяющих содержимое таблицы. Любая таблица состоит из строк и ячеек, которые задаются соответственно с помощью тегов <tr> и <td>.

Слайд 43


Атрибуты тега <table> Атрибут align задает выравнивание таблицы по краю окна браузера. Атрибут bgcolor устанавливает цвет фона таблицы. Атрибут border устанавливает толщину границы в пикселах вокруг ячеек. Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Атрибут cellspacing задает расстояние между внешними границами ячеек.
Описание слайда:
Атрибуты тега <table> Атрибут align задает выравнивание таблицы по краю окна браузера. Атрибут bgcolor устанавливает цвет фона таблицы. Атрибут border устанавливает толщину границы в пикселах вокруг ячеек. Атрибут cellpadding определяет расстояние между границей ячейки и ее содержимым. Атрибут cellspacing задает расстояние между внешними границами ячеек.

Слайд 44


Атрибуты тега <td> Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>: align , bgcolor ,
Описание слайда:
Атрибуты тега <td> Каждая ячейка таблицы, задаваемая через тег <td>, в свою очередь тоже имеет свои атрибуты, часть из которых совпадает с атрибутами тега <table>: align , bgcolor ,

Скачать

Похожие презентации
Mypresentation.ru
Загрузить презентацию