Графика в HTML
презентация к уроку по информатике и икт на тему

Опубликовано 16.10.2018 - 10:50 - Бабенко Ирина Анатольевна
Графика Использование графики в html Для того чтобы вставить в Web-страницу изображение, необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования можно создать простое изображение и сохранить его в нужном формате. Если программа этот формат не поддерживает, необходимо преобразовать файл в требуемый формат. Существует множество программ, предназначенных для преобразования одного графического формата в другой. Позаимствовать же картинки можно из различных программных пакетов или с других Web-страниц в Internet, содержащих библиотеки свободного доступа художественных изображений. Когда браузер выводит Web-страницу с изображением, соответствующий графический файл временно хранится в памяти компьютера. В большинстве браузеров есть команда, позволяющая сохранить файл на локальном диске. Существует также множество других вариантов получения графических файлов. Изображения могут нести определенную информацию, да и просто придают Web-странице привлекательный вид. Приведем наиболее распространенные случаи применения изображений: логотип компании на деловой странице; графика для рекламного объявления; различные рисунки; диаграммы и графики; художественные шрифты; подпись автора страницы; применение графической строки в качестве горизонтальной разделительной линии; применение графических маркеров для создания красивых маркированных списков. Теперь рассмотрим как вставить изображение в Web-страницу. Тегом HTML, который заставляет браузер выводить изображение, является image с обязательным атрибутом SRC (SouRCe, источник). Имя файла представляет собой имя выводимого графического файла. Замыкающего тега не требуется.

Скачать:

ВложениеРазмер
Файл grafika.pptx1.1 МБ

Предварительный просмотр:


Подписи к слайдам:

Слайд 1

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

Слайд 2

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

Слайд 3

Тег

Слайд 4

Атрибуты < img > src – определяет само изображение. align – выравнивание. border - устанавливает ширину рамку вокруг изображения. height, width – высота и ширина изображения в пикселях. hspace , vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали

Слайд 5

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

Слайд 6

Душный зной над океаном,
Небеса без облаков;

Слайд 7

Душный зной над океаном,
Небеса без облаков;

Слайд 8

Я.П. Полонский. Тишь

Душный зной над океаном,
Небеса без облаков;

Слайд 9

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

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

Слайд 10

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

Слайд 11

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

Слайд 12

Таблицы в HTML- документе

Слайд 13

Тег

< / table> - создает таблицу. Все прочие элементы таблицы – текст, рисунки, списки - должны быть вложенными в него. Допускается также вложение таблиц одна в другую, т.е. содержимым ячейки может быть другая таблица. Закрывающий тег обязателен Тег - описывает строки таблицы. Тег < caption > - описывает заголовок таблицы. Тег - описывает столбцы (ячейки таблицы).

Слайд 14

< tr > … < tr > … …

Слайд 15

Атрибуты для тэга

Align выравнивание таблицы относительно документа. Возможные значения: center , left , right Valign - выравнивает текст в таблице по вертикали. Значения: top, bottom, middle, baseline . background =“ имя файла “ строка, определяющая рисунок для заднего фона таблицы bgcolor =цвет определяет задний фон таблицы border толщина внешней рамки в пикселях. Если атрибут не указан, то таблица выводится без видимой рамки bordercolor =цвет цвет рамки width = число ширина таблицы в процентах или пикселях height = число рекомендуемая высота таблицы только в пикселях

Слайд 16

Заголовок столбца 1 Заголовок столбца 2
Ячейка столбца 1, ряд 1 Ячейка столбца 2, ряд 1
Ячейка столбца 1, ряд 2 Ячейка столбца 2, ряд 2

Слайд 17

Вид в браузере:

Слайд 18

Таблица Звери

Морской котик
Жирафы
Леопард

Слайд 19

Параметры colspan и rowspan . Colspan - определяет количество столбцов, на которые простирается данная ячейка, а rowspan - количество рядов (эти параметры могут принимать значение от 2 и больше, т.е. наша ячейка может растягиваться на два и более столбца (ряда ).

Слайд 20

Используем параметр colspan =2, прописав его для ячейки 1х1. Код следующий: < table > < tr > < td height ="35" bgcolor ="#FFCC33" colspan ="2"> < center >1x1 < td width ="50" bgcolor ="#336699"> < center >1x2 < tr > < td height ="35" width ="50" bgcolor ="#336699"> < center >2x1 < td width ="50" bgcolor ="#FFCC33"> < center >2x2 < td width ="50" bgcolor ="#336699"> < center >2x3

Слайд 21

< tr >

1x1
1x2


По теме: методические разработки, презентации и конспекты

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

В презентации отражена история создания Интернета, приведены схемы организации Web-страниц. Подробно разобраны самые основные дескрипторы языка HTML....

Основы HTML. Разработка Web-сайта Шесть уровней ворженности (модуль) 11 класс

Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет: • повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций; • строит...

Рабочая программа элективного курса "К проекту чeрез HTML"

Данная рабочая программа составлена на основе авторской программы элективного  курса Т.М. Смирновой «К проекту через HTML». Программа имеет рецензию   Регионального экспертного совета...

Обобщающий урок «Разработка Веб-сайтов с использованием языка HTML»

Этот урок является заключительном  в  курсе “Разработка  Web-сайтов  с  использованием  языка  НТМL” . Он проведится его в  форме конкурса. Урок  стоит из ...

Форматирование текста и размещение графики в HTML.

Цели урока:Дидактические:Познакомить учащихся с работой с изображениями в HTML. Развивающие:  Развивать познавательный интерес учащихся.Развивать  компьютерную грамотность учащихс...

http://www.prodlenka.org/metodichka/mypage.html http://videouroki.net/filecom.php?fileid=98712464 http://videouroki.net/filecom.php?fileid=98711040 http://www.prodlenka.org/svidetelstvo.html http://videouroki.net/filecom.php?fileid=98710201 http://www.pro

http://www.prodlenka.org/metodichka/mypage.htmlhttp://videouroki.net/filecom.php?fileid=98712464http://videouroki.net/filecom.php?fileid=98711040http://www.prodlenka.org/svidetelstvo.htmlhttp://videou...

Ссылки на мои статьи и публикации в Живом Журнале (LIVEJOURNAL): - 1. https://vladimir-shkola.livejournal.com/376.html 2. https://vladimir-shkola.livejournal.com/919.html

Ссылки на мои  статьи и публикации в Живом Журнале (LIVEJOURNAL):https://vladimir-shkola.livejournal.com/376.htmlhttps://vladimir-shkola.livejournal.com/919.html...