HTML. Добавление графики в WEB-документ.

Презентация:



Advertisements
Похожие презентации
Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – Для фотографий лучше использовать формат JPEG для.
Advertisements

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – Для фотографий лучше использовать формат JPEG для.
Вставка изображений в Web-страницы. - тег вставки изображения в документ Изображение появится в том месте документа, в котором записан этот тэг. Команда.
Форматирование текста на Web-странице Пока наша страница выглядит не слишком привлекательно: мелкий шрифт чёрного цвета на белом фоне. С помощью тэгов.
HTML Урок 2 Пищита Е.В.. СОДЕРЖАНИЕ УРОКА Вставка горизонтальной линии. Тег Цвет горизонтальной линии. Тег Выравнивание горизонтальной линии. Тег Линия.
Форматирование текста и размещение графики.
Название страницы содержание страницы Структура любого HTML файла.
Вставка изображений.. Могут размещаться графические файлы трёх форматов GIF, JPG, PNG. Для вставки изображения используется тэг с атрибутом SRC, который.
HTML (HyperText Markup Language) - Язык Разметки Гипертекста.
РАЗМЕЩЕНИЕ ИНФОРМАЦИИ В ИНТЕРНЕТ РАЗРАБОТКА WEB-ПРИЛОЖЕНИЙ.
- вставка изображения - вставка изображения Атрибуты тэга: src- адрес (путь) файла с картинкой align- положение рисунка alt- альтернативный текст Вставка.
Графика на гипертекстовых страницах. МОУ СОШ 5. Браузеры понимают два графических формата JPEG – для фотографий и сложных по цветовой гамме рисунков с.
HTML (HyperText Markup Language). Основные понятия Элемент – конструкция языка HTML. Он состоит из 3 частей: открывающий тег, содержимое, закрывающий.
Какой тег является тегом перевода строки? 1.BR 2.TR 3.HR 4.I.
Таблицы Минимальный набор тегов и их параметров для создания таблицы. Документ может содержать произвольное число таблиц, причём допускается вложенность.
Форматирование текста Вставка рисунка Таблицы Гиперссылки Круговой сектор Структура документа.
Создание Web-страницы.. Cтруктура HTML документа (основные разделы) Служебная информация информация о имени страницы Web документ.
(HyperText Markup Language) – язык гипертекстовой разметки.
Материалы к домашней работе для 8-х классов. Создание Web-страницы.
Проверка знаний Запишите теги : 1 вариант 1. Заголовок страницы 2. Содержание 3. Размер шрифта 4. Абзац 5. Как называется главная страница сайта 2 вариант.
Транксрипт:

Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – Для фотографий лучше использовать формат JPEG для рисунков и пиктограмм - GIF.GIF.JPEG

GIF – (Graphics Interchange Format) формат обмена графикой. Преимущества: 1. Кодировка платформеннойй-независима (Windows, Macintosh, Unics). 2. При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети. 3.GIF-изображения легко анимировать, использовать прозрачность и всплывание. Недостаток: ограниченный набор цветов. используется для пиктограмм и небольших картинок. 7 Кб 159 Кб 113 Кб

JPEG - (Joint Photographic Expert Group) – организация по стандартизации Преимущества: 1. Кодировка платформеннойй-независима (Windows, Macintosh, Unics). 2. При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети. 3. Поддерживает десятки тысяч цветов 37 Кб 20 Кб

Тэг - вставка изображений Атрибуты: Src - обязательный, значение- адрес изображения Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку: alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны. Alt= Собака на сене Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку.

align – выравнивание. Положение изображения лучше всегда указывать явно. Значения: left, right – по левому или по правому краю. top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке. middle – середина изображения выравнивается с серединой строки. bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.

border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения border= толщина рамки в пикселях border=0 – убрать рамку height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну. width = 100% height= 20 – полоса на все окно шириной 20 пикселей. Если указать только width = 30%, то высоту браузер подберет сам пропорционально рисунку. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width. hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали.

Центрирование изображения Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев или новой строки. 1 способ: Текст Текст 2 способ: Текст Текст

Обтекание изображения текстом Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением, текст обтекает изображение. Душный зной над океаном, Небеса без облаков;

Если в тэге не указывать атрибут align=left или right, то текст на сайте располагается следующим образом: Я.П. Полонский. Тишь Душный зной над океаном, Небеса без облаков;

Можно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом.

Кошки очень забавные животные. Они создают уют в доме, радуют нас. Особенно приятно смотреть на маленьких котят.

Пояснения: 1. Обе картинки имеют значение атрибута width="25%", но правая картинка заметно меньше левой. Это происходит потому, что 25% для правой картинку вычисляются от ширины, оставшейся после вывода левой картинки, т.е., от 75% ширины окна браузера. 2. Для того, чтобы текст выводился после всех картинок, а не между ними, используем

Если выводятся несколько картинок с одинаковым выравниванием ( left или right ), то следующее изображение позиционируется относительно предыдущего.

Байкал Тузик Шарик

Звуковой фон Корректно работает только в Internet Explorer Тэг - проигрывает аудиофайл при загрузке содержащего его документа. При обновлении документа проигрывание музыки возобновляется. Атрибуты: src="имя файла " - файл с расширением.wav,.midi,.mp3 Loop=количество повторений =infinite – бесконечно.