Презентация, доклад на тему Практическая работа Изображения в HTML-документе

Для того, что бы встроить изображение в HTML-документ нужно только иметь это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.Допустим, нам нужно

Слайд 1Изображения в HTML-документе
Занятие 8.

Изображения в HTML-документе Занятие 8.

Слайд 2
Для того, что бы встроить изображение в HTML-документ нужно только иметь

это самое изображение в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg) и одну строчку в HTML-тексте.
Допустим, нам нужно включить в документ изображение, записанное в файл picture.gif, находящийся в одном каталоге с HTML-документом. Тогда строчка будет вот такая:

Метка может также включать атрибут ALT="[текст]", например:
Картинка
Встретив такую метку, браузер покажет на экране текст Картинка и начнет загружать на его место картинку из файла picture.gif. Атрибут ALT может оказаться необходимым для старых браузеров, которые не поддерживают изображений, а также на случай, если у браузера отключена автоматическая загрузка изображений (при медленном подключении к Интернет это делается для экономии времени).
Файл, содержащий изображение, может находиться в другом каталоге или даже на другом сервере.
Для того, что бы встроить изображение в HTML-документ нужно только иметь это самое изображение в формате GIF

Слайд 3Разберем все, что мы знаем об изображениях, с помощью примера 8

sp8.html.



Пример 8


Изображения


Изображение можно встроить очень просто:



Кроме того, изображение можно сделать "горячим", то есть осуществлять переход при нажатии на изображение:





Обратите внимание на вторую часть примера. Если ссылка на изображение находится между метками и , изображение фактически становится кнопкой, при нажатии на которую происходит переход по ссылке (на оглавление HTML Руководства).
Разберем все, что мы знаем об изображениях, с помощью примера 8 sp8.html. Пример 8 Изображения Изображение можно

Слайд 4
Цветовая гамма HTML- документа определяется атрибутами, размещенными внутри метки . Вот

список этих атрибутов:
bgcolor — Определяет цвет фона документа.
text — Определяет цвет текста документа.
link — Определяет цвет выделенного элемента текста, при нажатии на который происходит переход по гипертекстовой ссылке.
vlink — Определяет цвет ссылки на документ, который уже был просмотрен ранее.
alink — Определяет цвет ссылки в момент, когда на нее указывает курсор мыши и нажата ее правая кнопка, то есть непосредственно перед переходом по ссылке.
Цвет кодируется последовательностью из трех пар символов. Каждая пара представляет собой шестнадцатеричное значение насыщенности заданного цвета одним из трех основных цветов (красным, зеленым и синим) в диапазоне от нуля (00) до 255 (FF). Разберем несколько примеров.
bgcolor=#FFFFFF — Цвет фона. Насыщенность красным, зеленым и синим одинакова — FF (это шестнадцатеричное представление числа 255). Результат — белый цвет.
text=#000000 — Цвет текста. Насыщенность красным, зеленым и синим одинакова — 00 (ноль). Результат — черный цвет.
link=#FF0000 — Цвет гипертекстовой ссылки. Насыщенность красным — FF (255), зеленым и синим — 00 (ноль). Результат — красный цвет.

Цветовая гамма HTML-документа

Цветовая гамма HTML- документа определяется атрибутами, размещенными внутри метки . Вот список этих атрибутов:bgcolor — Определяет цвет

Слайд 5
Кроме того, метка может включать атрибут background="[имя файла]", который задает

изображение, служащее фоном для текста и других изображений. Как и любое другое изображение, фон должен быть представлен в формате GIF (файл с расширением *.gif) или JPEG (файл с расширением *.jpg или *.jpeg).
Браузеры заполняют множественными копиями изображения-фона все пространство окна, в котором открыт документ, подобно тому, как при строительстве большие пространства стен покрывают маленькими (и одинаковыми) плитками.
Важно отметить, что цвет фона и изображение-фон никак не отображаются на бумаге при выводе HTML-документа на печать. Из этого есть одно важное практическое следствие: старайтесь не использовать текст белого цвета.
Кроме того, метка может включать атрибут background=

Слайд 6
Практическое задание:

Просмотрите и законспектируйте теги языка HTML

Скопируйте в Блокнот пример и

сохраните его с именем SP8.html

Добавьте картинку из папки Мои рисунки или др. На место picture-big.gif встает увеличенная копия или изображение на которое делаем ссылку.

Сохраните в файле SP8_m.html

Откройте файл SP8_m.html Браузером.

Повторно проверьте результат.
Практическое задание:Просмотрите и законспектируйте теги языка HTMLСкопируйте в Блокнот пример и сохраните его с именем SP8.htmlДобавьте картинку

Что такое shareslide.ru?

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


Для правообладателей

Яндекс.Метрика

Обратная связь

Email: Нажмите что бы посмотреть