Графика в HTML
методическая разработка по информатике и икт (10 класс)
Проверьте свои знания по HTML с этим увлекательным и подробным тестом! ???? Этот тест включает в себя вопросы, которые помогут вам узнать о самых важных тегах, их атрибутах и правильном использовании. Пройдите тест и откройте для себя основы веб-разработки!
Что в тесте?
- Вопросы о базовых и специализированных тегах в HTML
- Правильное использование атрибутов для тегов
Не упустите шанс стать экспертом по HTML!
Скачать:
Вложение | Размер |
---|---|
![]() | 46.5 КБ |
![]() | 1.08 МБ |
Предварительный просмотр:
Лабораторная работа
«Размещение графики на Web-странице»
Задание 1.
- Создайте новую страницу в редакторе Блокнот.
- В элементе
укажите название странички «Оформление цветом Web-страницы» - В начальном элементе используйте соответствующий атрибут, чтобы сделать цвет фона странички черным.
- Сделайте надпись белым цветом «Спокойной ночи». Выровняйте ее по середине страницы. Размер шрифта 6.
- Вставьте горизонтальную линию красного цвета.
- Сделайте надпись желтого цвета «Приятных сновидений». Выровняйте ее по середине страницы. Размер шрифта 8.
- Вставьте горизонтальную линию синего цвета толщиной 10 пикселей длиной 50% от ширины экрана, и выровняйте ее по центру.
Задание 2.
- Создайте новую страницу в редакторе Блокнот.
- В элементе
укажите название странички «Размещение графики на Web-странице» - В теге укажите любой цвет странички.
- Разместите на страничке рисунок футбольного мяча файл . Для размещения изображения вам требуется указать путь к файлу в элементе
. Тогда элемент
будет выглядеть следующим образом:
- Сделайте подпись к рисунку «Футбольный мяч» с помощью атрибута alt.
- Создайте рамку вокруг рисунка шириной 2 пикселя.
- Над рисунком поместите заголовок «Мир футбола» самого большого размера и выровняйте его по центру страницы, задайте цвет.
Задание 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 |
Предварительный просмотр:
Подписи к слайдам:
А1 (базовый уровень, время – 1 мин) Тема : Кодирование текстовой информации. Кодировка ASCII. Основные кодировки кириллицы. Автоматическое устройство осуществило перекодировку информационного сообщения на русском языке, первоначально записанного в 16-битном коде Unicode, в 8-битную кодировку КОИ-8. При этом информационное сообщение уменьшилось на 480 бит. Какова длина сообщения в символах? 1) 30 2) 60 3) 120 4) 480
А3 (базовый уровень, время – 1 мин) Тема: Системы счисления и двоичное представление информации в памяти компьютера. A4 Выполнение арифметических операций в двоичной, восьмеричной и шестнадцатеричной системах счисления. Как записывается число A 87 16 в восьмеричной системе счисления? 1) 435 8 2) 1577 8 3) 5207 8 4) 6400 8
А11 (базовый уровень, время – 1 мин) Тема: Кодирование и декодирование информации. Для кодирования букв А, В, С, D используются трехразрядные последовательные двоичные числа, начинающиеся с 1 (от 100 до 111 соответственно). Если таким способом закодировать последовательность символов CDAB и записать результат в шестнадцатеричном коде, то получится: 1) А52 16 2) 4С8 16 3) 13145 16 4) DE5 16
Добавление графики в WEB-документ 18 Январь, 2025
Современные браузеры могут работать с различными форматами изображений, но наиболее предпочтительные – Для фотографий лучше использовать формат JPEG для рисунков и пиктограмм - GIF . GIF . JPEG
GIF – ( Graphics Interchange Format ) формат обмена графикой. Преимущества: Кодировка платформенно-независима ( Windows, Macintosh, Unics ). При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети. GIF -изображения легко анимировать, использовать прозрачность и всплывание. Недостаток: ограниченный набор цветов. используется для пиктограмм и небольших картинок. 7 Кб 159 Кб 113 Кб
JPEG - ( Joint Photographic Expert Group ) – организация по стандартизации Преимущества: Кодировка платформенно-независима ( Windows, Macintosh, Unics ). При создании файла применяется особая технология сжатия, которая существенно сокращает его размер, что очень ускоряет передачу его по сети. Поддерживает десятки тысяч цветов 37 Кб 20 Кб
Тэг - вставка изображений Атрибуты: Src - обязательный, значение- адрес изображения
Обычно файлы с картинками помещают в ту же папку, что и сама страница или в отдельную папку:
alt – определяет альтернативный текст, который появляется на месте картинки в окне браузера, если вывод картинки невозможен или заблокирован пользователем . Значение alt – строка текста, длиной до 1024 символа. Кавычки обязательны. Alt= “ Собака на сене “ Этот текст также появиться в виде всплывающей подсказки, когда указатель мыши направлен на картинку. < IMG src =” boss 2. gif alt =”Портрет маленького джентльмена”>
border - устанавливает или убирает (для гиперссылок) рамку вокруг изображения border = толщина рамки в пикселях border =0 – убрать рамку height, width – высота и ширина изображения в пикселях. Размеры могут быть больше или меньше реальных размеров изображения. Браузер автоматически масштабирует его. Значения можно указывать в % по отношению к окну. width = “100%” height= 20 – полоса на все окно шириной 20 пикселей. Если картинка не загрузилась, то на экране остается пустая область с заданными атрибутами height, width . hspace, vspace – задают расстояние в пикселях между картинкой и текстом по вертикали и горизонтали. < IMG src =” boss 2. gif width =”76” height =”121” border =”2” alt =”Портрет маленького джентльмена”>
align – выравнивание . Положение изображения лучше всегда указывать явно. Значения: left, right – по левому или по правому краю. top – верхняя граница изображения устанавливается на уровне верхнего края самого высокого элемента в строке. middle – середина изображения выравнивается с серединой строки. bottom – (по умолчанию) нижний край изображения выравнивается с базовой линией текста.
Центрирование изображения Выровнять изображение по центру можно, только выделив его из текста тэгами абзацев, раздела
![](“dog.gif”)
Обтекание изображения текстом Значения left и right атрибута align помещают изображение у левого или правого края документа. Затем браузер выводит оставшееся содержание документа в свободное пространство, смежное с изображением, текст обтекает изображение. Душный зной над океаном,
Небеса без облаков;
Если в тэге Я.П. Полонский. Тишь
Душный зной над океаном,
Небеса без облаков;
ЦВЕТ И ФОН СТРАНИЧКИ Если использовать рисунок в качестве «обоев» странички ( background ), то в теге < BODY > используем этот атрибут с указанием адреса рисунка «обоев». Пример :
< BODY bgcolor =" RED "> фон цветаМожно поместить картинки одновременно по обеим сторонам документа. В этом случае картинки задаются перед текстом.
Кошки очень забавные животные.
Они создают уют в доме, радуют нас.
Особенно приятно смотреть на маленьких котят.
Пояснения: Обе картинки имеют значение атрибута width="25%" , но правая картинка заметно меньше левой. Это происходит потому, что 25% для правой картинку вычисляются от ширины, оставшейся после вывода левой картинки, т.е., от 75% ширины окна браузера. Для того, чтобы текст выводился после всех картинок, а не между ними, используем
Если выводятся несколько картинок с одинаковым выравниванием ( left или right ), то следующее изображение позиционируется относительно предыдущего.
Итоги урока Сегодня мы узнали: 1. Как сделать фон всего документа 1. Как добавлять в документ изображения, 2. Способы обтекания картинок текстом.
По теме: методические разработки, презентации и конспекты
Язык гипертекстовой разметки HTML
В презентации отражена история создания Интернета, приведены схемы организации Web-страниц. Подробно разобраны самые основные дескрипторы языка HTML....
Основы HTML. Разработка Web-сайта Шесть уровней ворженности (модуль) 11 класс
Урок с использованием модульной технологии.На мой взгляд, использование модульной технологии позволяет: • повысить мотивацию учащихся в освоении не только знаний, но и ключевых компетенций; • строит...
Рабочая программа элективного курса "К проекту чeрез HTML"
Данная рабочая программа составлена на основе авторской программы элективного курса Т.М. Смирновой «К проекту через HTML». Программа имеет рецензию Регионального экспертного совета...
![](/sites/default/files/pictures/2013/12/20/picture-370936-1387549812.jpg)
Форматирование текста и размещение графики в 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...
Графика в HTML
Графика Использование графики в html Для того чтобы вставить в Web-страницу изображение, необходимо либо нарисовать его, либо взять уже готовое. В любой программе рисования можно создать простое из...
Ссылки на мои статьи и публикации в Живом Журнале (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...