Добавить материал и получить бесплатное свидетельство о публикации в СМИ
Эл. №ФС77-60625 от 20.01.2015
Свидетельство о публикации

Автоматическая выдача свидетельства о публикации в официальном СМИ сразу после добавления материала на сайт - Бесплатно

Добавить свой материал

За каждый опубликованный материал Вы получите бесплатное свидетельство о публикации от проекта «Инфоурок»

(Свидетельство о регистрации СМИ: Эл №ФС77-60625 от 20.01.2015)

Инфоурок / Информатика / Презентации / Урок по теме "Графика в HTML"
ВНИМАНИЮ ВСЕХ УЧИТЕЛЕЙ: согласно Федеральному закону № 313-ФЗ все педагоги должны пройти обучение навыкам оказания первой помощи.

Дистанционный курс "Оказание первой помощи детям и взрослым" от проекта "Инфоурок" даёт Вам возможность привести свои знания в соответствие с требованиями закона и получить удостоверение о повышении квалификации установленного образца (180 часов). Начало обучения новой группы: 28 июня.

Подать заявку на курс
  • Информатика

Урок по теме "Графика в HTML"

Выберите документ из архива для просмотра:

1.08 МБ Графика.ppt
46.5 КБ Лабораторная работа.doc
10.36 КБ 1.jpg
11.73 КБ 2.jpg
5.93 МБ задание3 .bmp

Выбранный для просмотра документ Графика.ppt

библиотека
материалов
*
А1 (базовый уровень, время – 1 мин) Тема: Кодирование текстовой информации. К...
А3 (базовый уровень, время – 1 мин) Тема: Системы счисления и двоичное предст...
А11 (базовый уровень, время – 1 мин) Тема: Кодирование и декодирование информ...
* *
Современные браузеры могут работать с различными форматами изображений, но на...
GIF – (Graphics Interchange Format) формат обмена графикой. Преимущества: Код...
JPEG - (Joint Photographic Expert Group) – организация по стандартизации Преи...
Тэг  - вставка изображений Атрибуты: Src - обязательный, значение- адрес изоб...
border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения...
align – выравнивание. Положение изображения лучше всегда указывать явно. Знач...
Центрирование изображения Выровнять изображение по центру можно, только выдел...
Обтекание изображения текстом Значения left и right атрибута align помещают и...
Если в тэге  не указывать атрибут align=left или right, то текст на сайте рас...
ЦВЕТ И ФОН СТРАНИЧКИ Если использовать рисунок в качестве «обоев» странички (...
Можно поместить картинки одновременно по обеим сторонам документа. В этом слу...
Кошки очень забавные животные.  Они создают уют в доме, радуют нас....
Пояснения: Обе картинки имеют значение атрибута width="25%" , но правая карти...
Если выводятся несколько картинок с одинаковым выравниванием (left или right)...
      Байкал   Тузик   Шарик
Сегодня мы узнали: 1. Как сделать фон всего документа 1. Как добавлять в доку...
21 1

Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Описание презентации по отдельным слайдам:

№ слайда 1 *
Описание слайда:

*

№ слайда 2 А1 (базовый уровень, время – 1 мин) Тема: Кодирование текстовой информации. К
Описание слайда:

А1 (базовый уровень, время – 1 мин) Тема: Кодирование текстовой информации. Кодировка ASCII. Основные кодировки кириллицы. Автоматическое устройство осуществило перекодировку информационного сообщения на русском языке, первоначально записанного в 16-битном коде Unicode, в 8-битную кодировку КОИ-8. При этом информационное сообщение уменьшилось на 480 бит. Какова длина сообщения в символах? 1) 30 2) 60 3) 120 4) 480

№ слайда 3 А3 (базовый уровень, время – 1 мин) Тема: Системы счисления и двоичное предст
Описание слайда:

А3 (базовый уровень, время – 1 мин) Тема: Системы счисления и двоичное представление информации в памяти компьютера. A4Выполнение арифметических операций в двоичной, восьмеричной и шестнадцатеричной системах счисления. Как записывается число A8716 в восьмеричной системе счисления? 1) 4358 2) 15778 3) 52078 4) 64008

№ слайда 4 А11 (базовый уровень, время – 1 мин) Тема: Кодирование и декодирование информ
Описание слайда:

А11 (базовый уровень, время – 1 мин) Тема: Кодирование и декодирование информации. Для кодирования букв А, В, С, D используются трехразрядные последовательные двоичные числа, начинающиеся с 1 (от 100 до 111 соответственно). Если таким способом закодировать последовательность символов CDAB и записать результат в шестнадцатеричном коде, то получится: 1) А5216 2) 4С816 3) 1314516 4) DE516

№ слайда 5 * *
Описание слайда:

* *

№ слайда 6 Современные браузеры могут работать с различными форматами изображений, но на
Описание слайда:

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

№ слайда 7 GIF – (Graphics Interchange Format) формат обмена графикой. Преимущества: Код
Описание слайда:

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

№ слайда 8 JPEG - (Joint Photographic Expert Group) – организация по стандартизации Преи
Описание слайда:

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

№ слайда 9 Тэг  - вставка изображений Атрибуты: Src - обязательный, значение- адрес изоб
Описание слайда:

Тэг <IMG> - вставка изображений Атрибуты: Src - обязательный, значение- адрес изображения <img src = “dog.gif”> Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку: <img src = “pict/dog.gif”> alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем. Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны. Alt= “Собака на сене “ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку. <IMG src=”boss2.gif alt=”Портрет маленького джентльмена”>

№ слайда 10 border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения
Описание слайда:

border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения border= толщина рамки в пикселях border=0 – убрать рамку height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну. width = “100%” height= 20 – полоса на все окно шириной 20 пикселей. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width. hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали. <IMG src=”boss2.gif width=”76” height=”121” border=”2” alt=”Портрет маленького джентльмена”>

№ слайда 11 align – выравнивание. Положение изображения лучше всегда указывать явно. Знач
Описание слайда:

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

№ слайда 12 Центрирование изображения Выровнять изображение по центру можно, только выдел
Описание слайда:

Центрирование изображения Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела <dir> или новой строки. 1 способ: Текст <br> <center> <img src = “dog.gif”> </center> Текст 2 способ: Текст <p align = center> <img src = “dog.gif”> </p> Текст

№ слайда 13 Обтекание изображения текстом Значения left и right атрибута align помещают и
Описание слайда:

Обтекание изображения текстом Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением,  текст обтекает изображение. <IMG SRC="море.jpg" ALIGN=LEFT width=50% vspace=10 hspace=10> Душный зной над океаном, <BR> Небеса без облаков; <BR>

№ слайда 14 Если в тэге  не указывать атрибут align=left или right, то текст на сайте рас
Описание слайда:

Если в тэге <src> не указывать атрибут align=left или right, то текст на сайте располагается следующим образом: <H2 ALIGN=CENTER> Я.П. Полонский. Тишь </H2> <IMG SRC="море.jpg" width=50% vspace=10 hspace=10> Душный зной над океаном, <BR> Небеса без облаков; <BR>

№ слайда 15 ЦВЕТ И ФОН СТРАНИЧКИ Если использовать рисунок в качестве «обоев» странички (
Описание слайда:

ЦВЕТ И ФОН СТРАНИЧКИ Если использовать рисунок в качестве «обоев» странички (background), то в теге <BODY> используем этот атрибут с указанием адреса рисунка «обоев». Пример: <BODY background=”wood.jpg”> <BODY bgcolor="RED"> фон цвета

№ слайда 16 Можно поместить картинки одновременно по обеим сторонам документа. В этом слу
Описание слайда:

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

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

<body bgcolor="#008080"> <p> <hr width="50%" size="5"> <p> <img src="1.jpg" width="25%" hspace="10" vspace="10" border="0" align="left"> <img src="3.jpg" width="25%" hspace="10" vspace="10" border="0" align="right"> <font size="+1" color="#C0C0C0"> <p align="center"> Кошки очень забавные животные. <br> Они создают уют в доме, радуют нас. <br clear="all"> Особенно приятно смотреть на маленьких котят. <p> <hr width="50%" size="5"> <p> </font> </body> </html>

№ слайда 18 Пояснения: Обе картинки имеют значение атрибута width=&quot;25%&quot; , но правая карти
Описание слайда:

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

№ слайда 19 Если выводятся несколько картинок с одинаковым выравниванием (left или right)
Описание слайда:

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

№ слайда 20       Байкал   Тузик   Шарик
Описание слайда:

<BODY bgcolor="#9900CC" text="#CCCCCC"> <font size=6> <br> <hr size=5> <br> <img src="1.BMP" align=left Width=200 height=200 hspace=20 vspace=20> Байкал <br> <img src="104.BMP" align=left Width=200 height=200 hspace=20 vspace=20> Тузик <br> <img src="11.BMP" align=left Width=200 height=200 hspace=20 vspace=20> Шарик <br clear=all> <hr size=5> <font> </BODY> </HTML>

№ слайда 21 Сегодня мы узнали: 1. Как сделать фон всего документа 1. Как добавлять в доку
Описание слайда:

Сегодня мы узнали: 1. Как сделать фон всего документа 1. Как добавлять в документ изображения, 2. Способы обтекания картинок текстом.

Выбранный для просмотра документ Лабораторная работа.doc

библиотека
материалов

Лабораторная работа

«Размещение графики на Web-странице»


Задание 1.

  1. Создайте новую страницу в редакторе Блокнот.

  2. В элементе <TITLE> укажите название странички «Оформление цветом Web-страницы»

  3. В начальном элементе <BODY> используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.

  4. Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 6.

  5. Вставьте горизонтальную линию красного цвета.

  6. Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.

  7. Вставьте горизонтальную линию синего цвета толщиной 10 пикселей длиной 50% от ширины экрана, и выровняйте ее по центру.

Задание 2.

  1. Создайте новую страницу в редакторе Блокнот.

  2. В элементе <TITLE> укажите название странички «Размещение графики на Web-странице»

  3. В теге <BODY> укажите любой цвет странички.

  4. Разместите на страничке рисунок футбольного мяча файл soccer.gif . Для размещения изображения вам требуется указать путь к файлу в элементе <IMG>. Тогда элемент <IMG> будет выглядеть следующим образом: <IMG src=”soccer.gif> Выравнивание по центру.

  5. Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt.

  6. Создайте рамку вокруг рисунка шириной 2 пикселя.

  7. Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы, задайте цвет.

Задание 3.

Выполнить страницу по образцу «КОШКИ»

ПРИМЕЧАНИЕ Стандартные цвета

Белый

 

white

#FFFFFF

Желтый

 

yellow

#FFFF00

Зеленый

 

green

#008000

Золотистый

 

gold

#FFD700

Индиго

 

indigo

#4B0080

Каштановый

 

maroon

#800000

Красный

 

red

#FF0000

Оливковый

 

oliv

#808000

Пурпурный

 

purple

#800080

Светло-зеленый

 

lime

#00FF00

Серебристый

 

silver

#C0C0C0

Серый

 

gray

#808080

Сизый

 

teal

#008080

Синий

 

blue

#0000FF

Ультрамарин

 

navy

#000080

Фиолетовый

 

violet

#EE80EE

Фуксиновый

 

fuchsia

#FF00FF

Черный

 

black

#000000



Подайте заявку сейчас на любой интересующий Вас курс переподготовки, чтобы получить диплом со скидкой 50% уже осенью 2017 года.


Выберите специальность, которую Вы хотите получить:

Обучение проходит дистанционно на сайте проекта "Инфоурок".
По итогам обучения слушателям выдаются печатные дипломы установленного образца.

ПЕРЕЙТИ В КАТАЛОГ КУРСОВ

Автор
Дата добавления 17.02.2016
Раздел Информатика
Подраздел Презентации
Просмотров174
Номер материала ДВ-462668
Получить свидетельство о публикации
Похожие материалы

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