Составить конспект о работе с изображениями в разметке html
Обновлено: 05.07.2024
Цель : повышение компьютерной грамотности учащихся в вопросе создания Web-страниц на языке разметки гипертекста (HTML) средствами текстового редактора Блокнот.
- Сформировать у учащихся способности самостоятельного создания сайта;
- Научить размещать графические изображения на web-страницах;
- Научить создавать графические гиперссылки для смены web-страниц.
- Развитие мотивации и стимулирование интересов учащихся к изучению информатики;
- Развитие у учащихся внимания и навыков самостоятельной работы.
- Формирование восприятия компьютера как инструмента информационной деятельности человека;
- Воспитание стремления к самоутверждению через освоение персонального компьютера;
- Воспитание потребности и умения работать в коллективе.
- по источнику знаний: словесные, наглядные, практические;
- по характеру познавательной деятельности: объяснительно – иллюстративные.
Тип занятия : изучение нового материала.
Оборудование занятия : компьютерный класс, мультимедийный проектор, экран, раздаточный материал.
- Организационная часть- 5 мин.
- Актуализация знаний -5 мин.
- Изложение нового материала- 20 мин.
- Подведение итогов -5 мин.
Приветствие, проверка готовности к занятию.
Педагог: На предыдущих занятиях мы изучали создание текстовых гиперссылок, создание таблиц.
Какой тег предназначен для создания гиперссылки, какие атрибуты тега используются для задания цвета гиперссылки, активной гиперссылки и ссылки, посещаемой в прошлом? Каково назначение таблиц на Web-страницах? Какие теги и атрибуты тегов предназначены для создания таблиц на Web-страницах?
Самыми распространенными изображениями, публикуемыми в Интернете, являются цифровые фотографии, рисунки и отсканированные картинки.
Красота и привлекательность оформления Web-страниц не должна влиять на скорость доставки информации в Сети. Чтобы успешно решать эту проблему, необходимо знать все используемые в Интернете графические форматы, понимать различия между ними, области применения и особенности использования.
Некоторые форматы могут быть специфичны только для одного браузера, а другие потребуют специального внешнего модуля.
Наиболее популярные графические форматы, которые стали фактическими стандартами для использования на WWW:
GIF, JPEG, PNG,BMP, TIFF - растровые форматы изображения
Векторные графические форматы значительно более привлекательны для использования в Сети: AI, CDR, CMX, EPS, FLA, FH, SVG, SWF, WMF.
Для размещения изображений, сначала их обрабатывают в графическом редакторе, задают размер в пикселях и помещают в папку, например, Images (изображения) данного сайта.
Для отображения изображения на web-странице используется тег c атрибутами:
Width=ширина изображения в пикселях;
Height= высота изображения в пикселях;
Border=ширина рамки изображения в пикселях;
Align=center (по центру), left (слева), right (справа), top (сверху) или bottom (снизу web-страницы) – выравнивание изображения;
Hspase- горизонтальный отступ в пикселях от изображения до текстовой или графической информации web-страницы;
Vspase- вертикальный отступ;
Если изображение использовать в качестве гиперссылки, то его необходимо заключить в тег , например,
В HTML изображения вставляются с помощью тега img.
Тег img — пустой, он содержит атрибуты и у него нет закрывающего тега.
Для отображения изображения на странице используется атрибут src. Src появилось от source, что означает Источник. Значением атрибута src является url-адрес изображения.
Строка выше означает, что изображение находится в той же директории (папке), что и сам html-файл, ссылающийся на данное изображение. Допустим, у Вас есть папка html, в которой содержится index.html с указанным выше кодом и само изображение с названием image.jpg.
В таком случае при открытии index.html в браузере Вы увидите данное изображение. Если же оно у Вас где-либо в другом месте (на папку выше или ниже), то вместо этого у Вас отобразится либо белое поле, либо небольшой прямоугольник с красным крестиком (не удалось загрузить изображение).
| Внимание! Сразу научитесь отслеживать две вещи: правильность адреса изображения и правильность написания самого названия. Так как при невнимательной ошибке в одном из этих параметров изображение НЕ отобразится, а Вы можете потратить некоторое количество времени и нервов. |
Изображения не всегда находятся в той же директории (папке), что и сам файл, поэтому прописывание путей конкретнее будет описано чуть позже.
Атрибуты тега img
Помимо src у тега img есть и другие атрибуты, которые отвечают за размеры отображаемого изображения, подпись к нему и прочее.
src - адрес изображения
width - ширина изображения
height - высота изображения
title - подпись, которая высвечивается при наведении на изображение
alt - альтернативный текст. Нужен для поискового робота и индексации изображений
border - толщина границы изображения. 0 - нет границы, 1 - самая тонкая граница и тд
| Не обязательно указывать все атрибуты. Минимум - src, чтобы браузер знал, откуда нужно взять изображение. |
Адрес вставленного изображения (примеры)
Как правило, изображения хранятся не в той же папке, что и сам html-файл. Для этого в той же директории создаётся папка images (или img, тут на вкус и цвет). А в неё уже кладутся все нужные изображения. В случае с отдельным хранением нужно будет прописывать для атрибута src уже другой адрес
Если файл лежит на папку выше, то так
Можно также вставить изображение вообще с другого сайта, при этом не загружая его к себе в папку. Для этого у Вас должно быть стабильное подключение к интернету и примерно следующий код, в котором в адресе Вы прописываете адрес изображения в интернете:
Фоновое изображение в HTML
В качестве фонового изображения могут выступать файлы с расширениями gif, jpg, jpeg и png. В том случае, если размер изображения меньше окна браузера, то изображение будет автоматически дальше заполнять оставшийся фон. В body используем атрибут background, в котором прописываем путь к изображению
Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML
Картинки в HTML. Работа с HTML изображениями. Размер картинок в HTML. Картинка ссылка в HTML.
По традиции во второй части вступления к статье приведу короткую аннотацию к записи, посвященной изображениям и картинкам в HTML:
- сначала мы поговорим о том, какие возможности есть в HTML для работы с картинками и изображениями;
- затем перечислим HTML атрибуты изображений;
- далее разберемся с тем, как вставить картинку в HTML документ;
- попробуем поработать с размером изображений при помощи HTML атрибутов, изменяя высоту и ширину картинки;
- изображения в глазах HTML интерпретатора — это обычный символ, как и любая буква, которую вы вводите с клавиатуры, но для символа-картинки в HTML мы можем задать определенное поведение или выравнивание, от этого зависит то, как будет вести себя текст, находящийся рядом с изображением, или как текст будет обтекать HTML картинку;
- и завершении мы разберемся с тем, как сделать картинку ссылку в HTML.
Что мы можем делать с изображениями и картинками в HTML
Язык HTML позволяет вставлять изображения в документы. Для вставки картинок в HTML используется специальный тэг . Картинки в HTML делают документы более яркими, интересными, наглядными и привлекательными для посетителей сайтов. Так же изображения могут быть использованы для оформления HTML шаблонов, но об этом мы поговорим, когда начнем изучать CSS.
Мы не будем сейчас вдаваться в маркетинг и говорить о том, что всевозможные картинки в HTML документах привлекают внимание посетителей и позволяют их удержать, тем более мы не будем вдаваться в подробности того, как это реализуется. Сейчас нас больше интересует техническая сторона изображений в HTML.
Когда мы открываем HTML документ с картинками, то браузер делает запрос на получение HTML документа и начинает его анализировать: сначала он формирует общую структуру страницы, а затем начинает анализировать: что нужно подключить к странице или другими словами, каких файлов еще не достает на данной странице (или какие ресурсы нужно подключить к HTML документу). Изображение, в отличие от других HTML элементов страницы, не является частью документа, поэтому браузер его подгружает после того, как проанализирует документ.
Или проще говоря, каждая картинка на вашей HTML странице – это дополнительный запрос браузера к серверу, на котором находится сайт. Поэтому, когда вы проводите внутреннюю оптимизацию сайта, то для ускорения работы сайта старайтесь сжимать изображения, но нужно понимать, что картинка теряет в качестве при сжатии, поэтому данный процесс – это всегда компромисс.
HTML позволяет задавать параметры отображения картинок в документе при помощи уникальных HTML атрибутов, о которых мы поговорим чуть ниже, например, средствами HTML мы можем изменять ширину и высоту картинки, задавать правила того, как текст будет обтекать изображение, сделать рамку для изображения, установить отступы, которые будут между изображениями и другими элементами HTML страницы и многое другое. Также отметим, что тэг является одиночным HTML тэгом. А элемент IMG является строчным HTML элементом.
Обо всем этом более подробно мы поговорим ниже и детально разберемся, какие средства есть в HTML для работы с картинками и изображениями.
Атрибуты изображений в HTML
Чтобы в дальнейшем не отвлекаться на пояснения, а также для того чтобы у вас появилось комплексное представление о работе с изображениями в HTML, сейчас мы приведем список уникальных атрибутов HTML изображения, вернее список уникальных атрибутов для тэга . Отметим, что для тэга доступны все универсальные HTML атрибуты и атрибуты событий. А теперь перечислим уникальные атрибуты картинок в HTML:
- Атрибут align. Для изображения в HTML можно задать способ того, как текст будет его обтекать при помощи атрибута align.
- Атрибут alt. Мы уже говорили, что картинки в HTML подгружаются после того, как браузер загрузит HTML документ. Отметим, что даже в 2016 году не в каждом населенном пункте есть широкие каналы для доступа в сеть Интернет, а сервера не всегда работают стабильно, поэтому атрибут alt, служащий для задания альтернативного текста HTML изображения, еще долго не потеряет свою актуальность. Также в некоторых браузерах отключена загрузка картинок, посетитель, у которого по тем или иным причинам не загрузилась картинка, будет видеть текст, написанный в атрибуте alt.
- Атрибут border. Данный атрибут позволяет задать толщину рамки вокруг картинки в HTML документе.
- Атрибут height. Данный атрибут позволяет задать высоту изображения в HTML
- Атрибут hspace. Этот атрибут позволяет менять горизонтальный отступ между картинкой и другими HTML элементами.
- Атрибут ismap. Данный атрибут указывает браузеру на то, что картинка в HTML документе является серверной картой-изображением.
- Атрибут longdesc. Данный атрибут служит для того, чтобы указать адрес HTML документа, в котором содержится аннотация к изображению.
- Атрибут lowsrc. При помощи атрибута lowsrc можно указать адрес, по которому находится картинка более низкого качества.
- Атрибут src. Этот атрибут позволяет задать путь к изображению, браузер перейдет по этому пути, чтобы вставить картинку в HTML документ.
- Атрибут vspace. Этот атрибут позволяет менять вертикальный отступ между картинкой и другими HTML элементами.
- Атрибут width. Данный атрибут позволяет задать ширину изображения в HTML.
- Атрибут usemap. Этот атрибут является ссылкой на тэг , содержащий координаты для клиентской карты-изображения.
Управлять отображением картинок в HTML, конечно, можно при помощи HTML атрибутов, но, поскольку мы знаем правила о том, что содержимое должно быть отделено от оформления, то для управления отображением картинок лучше все-таки использовать CSS.
Как вставить картинку в HTML документ. Учимся добавлять изображение в документ
Начнем работать с изображениями в HTML и первое, что мы научимся делать – вставлять картинки в HTML документ. Мы уже знаем, что картинки в документ вставляются при помощи специального атрибута src, который позволяет указать путь к файлу изображения. Когда мы разговаривали про ссылки в HTML, мы упоминали, что путь ссылки может быть абсолютный, а может быть относительным.
Относительный путь к файлу, в том числе и к файлу изображения, строится относительно какого-нибудь объекта, например, корня сайта или папки файловой система. А вот абсолютный путь – это такой путь, который доступен из любого места и на любом устройстве. Естественно, чаще всего для вставки изображений в HTML используют относительные пути, в отличии от HTML ссылок, но мы рассмотрим оба варианта вставки картинок в HTML.
Для данной публикации папка с примерами называется Lesson 13. Структуру папки HTML вы можете увидеть на рисунке ниже:
Готовим файловую систему для того, чтобы разобраться с относительными путями для вставки изображений в HTML
Файл html41.jpg – это изображение из публикации, в которой мы говорили про HTML списки. Мы можем сказать, что папка HTML является родительской папкой для папки Lesson 13. HTML документ, в который мы будем вставлять картинку находится в папке Lesson 13, я его назвал img.html, смотрите изображение ниже.
В данной папке находится HTML документ, в который мы будем вставлять картинку
HTML-изображения добавляются на веб-страницы с помощью элемента . Использование графики делает веб-страницы визуально привлекательнее. Изображения помогают лучше передать суть и содержание веб-документа.
Вставка изображений в HTML-документ
1. Элемент
Элемент представляет изображение и его резервный контент, который добавляется с помощью атрибута alt . Так как элемент является строчным, то рекомендуется располагать его внутри блочного элемента, например,
Элемент имеет обязательный атрибут src , значением которого является абсолютный или относительный путь к изображению:
Для элемента доступны следующие атрибуты:
1.1. Адрес изображения
Или же через относительный путь от документа или корневого каталога сайта:
- url(../images/anyphoto.jpg) — относительный путь от документа,
- url(/images/anyphoto.jpg) — относительный путь от корневого каталога.
Это интерпретируется следующим образом:
- ../ — означает подняться вверх на один уровень, к корневому каталогу,
- images/ — перейти к папке с изображениями,
- anyphoto.jpg — указывает на файл изображения.
1.2. Размеры изображения
Без задания размеров изображения рисунок отображается на странице в реальном размере. Отредактировать размеры изображения можно с помощью атрибутов width и height . Если будет задан только один из атрибутов, то второй будет вычисляться автоматически для сохранения пропорций рисунка.
1.3. Форматы графических файлов
- Формат JPEG(Joint Photographic Experts Group). Изображения JPEG идеальны для фотографий, они могут содержать миллионы различных цветов. Сжимают изображения лучше GIF, но текст и большие площади со сплошным цветом могут покрыться пятнами.
- Формат GIF(Graphics Interchange Format). Идеален для сжатия изображений, в которых есть области со сплошным цветом, например, логотипов. GIF-файлы позволяют установить один из цветов прозрачным, благодаря чему фон веб-страницы может проявляться через часть изображения. Также GIF-файлы могут включать в себя простую анимацию. GIF-изображения содержат всего лишь 256 оттенков, из-за чего изображения выглядят пятнистыми и нереалистичного цвета, как плакаты.
- Формат PNG(Portable Network Graphics). Включает в себя лучшие черты GIF- и JPEG-форматов. Содержит 256 цветов и дает возможность сделать один из цветов прозрачным, при этом сжимает изображения в меньший размер, чем GIF-файл.
- Формат APNG(Animated Portable Network Graphics). Формат изображения, основанный на формате PNG. Позволяет хранить анимацию, а также поддерживает прозрачность.
- SVG(Scalable Vector Graphics). SVG-рисунок состоит из набора геометрических фигур, описанных в формате XML: линия, эллипс, многоугольник и т.п. Поддерживается как статичная, так и анимированная графика. Набор функций включает в себя различные преобразования, альфа-маски, эффекты фильтров, возможность использования шаблонов. Изображения в формате SVG могут изменяться в размере без снижения качества.
- Формат BMP(Bitmap Picture). Представляет собой несжатое (оригинальное) растровое изображение, шаблоном которого является прямоугольная сетка пикселей. Bitmap-файл состоит из заголовка, палитры и графических данных. В заголовке хранится информация о графическом изображении и файле (глубина пикселей, высота, ширина и количество цветов). Палитра указывается только в тех Bitmap-файлах, которые содержат палитровые изображения (8 и менее бит) и состоят не более чем из 256 элементов. Графические данные представляют саму картинку. Глубина цвета в данном формате может быть 1, 2, 4, 8, 16, 24, 32, 48 бит на пиксель.
- Формат ICO(Windows icon). Формат хранения значков файлов в Microsoft Windows. Также, Windows icon, используется как иконка на сайтах в интернете. Именно картинка такого формата отображается рядом с адресом сайта или закладкой в браузере. Один ICO-файл содержит один или несколько значков, размер и цветность каждого из которых задаётся отдельно. Размер значка может быть любым, но наиболее употребимы квадратные значки со сторонами 16, 32 и 48 пикселей.
2. Элемент
Элемент служит для представления графического изображения в виде карты с активными областями. Активные области определяются по изменению вида курсора мыши при наведении. Щелкая мышью на активных областях, пользователь может переходить к связанным документам.
Для элемента доступен атрибут name , который задает имя карты. Значение атрибут name для элемента должно соответствовать имени в атрибуте usemap элемента :
- Для учеников 1-11 классов и дошкольников
- Бесплатные сертификаты учителям и участникам
Тема: Вставка графических изображений на Web -страницу.
Образовательные:
Дать представление о форматах графических файлов, используемых при вставке графики на Web -страницу;
Познакомить с тэгом вставки графических изображений и его атрибутами;
Формировать умение размещать графику на Web -странице.
Развивающие:
Развитие познавательного интереса, логического мышления.
Воспитательные:
Воспитывать аккуратность и грамотность при выполнении заданий.
Оборудование:
Интерактивная доска, мультимедиа проектор, презентация, раздаточный материал для студентов.
Изучение нового материала.
Гимнастика для глаз.
Закрепление изученного материала.
ИКТ-технология – на протяжении всего урока.
Проблемная технология на этапе изучения нового материала.
Игровая технология на этапе закрепления изученного материала.
На прошлых уроках мы с вами говорили, что одной из профессиональных компетенций учителя является умение организовать обмен опытом с коллегами. Для этого служат образовательные сайты, порталы и издательства, где учителя размещают свой опыт.
Давайте вспомним основные вопросы рассмотренные нами на прошлых уроках.
- Что такое Web - c айт?
- В чём состоит технология HTML ?
- Определите назначение основных тэгов HTML .(стр.1)
Вспомним структуру Web - страниц. Расположите тэги HTML в нужной последовательности. (стр.2)
Web -сайт по напоминает журнал, который содержит информацию, посвящённую какой-либо теме или проблеме. Как журнал состоит из печатных страниц, так и Web -сайт состоит их компьютерных Web -страниц.
Технология HTML состоит в том, что в обычный текстовый документ вставляются управляющие символы (тэги) и в результате мы получаем Web -страницу, которую можем просмотреть с помощью браузера.
Студенты, используя интерактивную доску, устанавливают соответствие.
Работа с интерактивной доской.
Студенты сравнивают свою работу с образцом.
На прошлом уроке мы учились форматировать текст на Web - странице. Но только отформатированного текста не достаточно для того, чтобы привлечь внимание к вашему сайту. Что ещё необходимо разместить на сайте, чтобы он был интересен пользователям? (графику)
Включение изображений в Web -страницу всегда приводит к успешным проектам или просто к хорошему и красивому интерфейсу сайта.
Чему же мы будем учиться на уроке?
IV . Работа по теме урока.
По ходу изучения нового материала мы будем заполнять опорный конспект.
В настоящее время существует три основных графических Web -формата. В качестве части вашего дизайна веб-обозреватель может отображать форматы GIF, JPEG и PNG.(стр.3)
Формат графического обмена (Graphic Interchange Format), более известный как GIF, был одним из первых поддерживаемых в Интернете форматов. Особенным его делает тот факт, что он поддерживает только 256 цветов и чаще всего используется для изображений с большими областями одного цвета. Мультипликацию, иллюстрации, черно-белые фотографии и графики лучше сохранять в формате GIF. Кроме того, gif-файлы могут быть анимированными.
Формат JPEG был специально разработан для фотоизображений, так как он поддерживает миллионы цветов.
Изначально разработанный для замены GIF, формат PNG оказался достаточно универсальным. Он имеет ряд преимуществ перед форматами GIF и JPEG.
Если рисунок сохранён в другом формате, то его необходимо предварительно преобразовать в один из этих форматов с помощью графического редактора.
img sr с= “компьютер. gif ”>
Если файл находится в другом месте, то необходимо указывать полное имя файла. img src Times New Roman, serif"> papka / image . jpg ">
img sr с= ” C :\компьютер\компьютер. gif ”>
Если файл находится на удалённом сервере в Интернете, то необходимо указать URL -адрес этого файла. URL -адрес - это способ однозначно указать на что-то в интернете.
На практике, для своего же удобства, картинку всегда нужно класть в одну папку с Web -страницей и никакой путаницы не будет. Принято папке с изображениями присваивать имя image s .
Иллюстрации на Web -страницах – неотъемлемый элемент дизайна. Однако пользователи иногда, в целях экономии времени, отключают в браузере загрузку графических изображений и читают только тексты. Поэтому, чтобы не терялся смысл и функциональность страницы, вместо рисунка должен выводиться поясняющий текст. (стр.5)
Поясняющий текст выводится с помощью атрибута А LT , значением которого является текст, поясняющий, что должен был бы увидеть пользователь на рисунке:
Вместе с текстом картинка на Web -странице выглядит так: (стр.7)
После вставки картинки возникает вопрос: что нужно сделать, чтобы весь текст располагался рядом с картинкой, а не только одна его строчка?
Вспомним об атрибуте "ALIGN" , который отвечает за выравнивание и используется с множеством других тэгов.
В таком случае картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа.
Чтобы разместить картинку справа, а текст обтекает ее слева, надо прописать … "Right". (стр.9)
Но это еще не все параметры. (стр.10)
Текст может располагаться:
внизу картинки -
посередине -
вверху -
Читайте также: