38036

Вставка изображений на WEB-страницу

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

Информатика, кибернетика и программирование

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так img src= путь к картинке название картинки.расширение картинки Для вашего удобства кладите картинку в ту же директорию что и документ тогда путаницы будет меньше и записывать короче img src= название картинки.расширение картинки Если картинка лежит на уровень выше а документ находится в поддиректории то ссылка на неё будет такой: img src= . название картинки.

Русский

2013-09-25

274.5 KB

37 чел.

Лабораторная работа №5. «Вставка изображений на WEB-страницу»

<img a >  - вставляет изображение на WEB-страницу.

Атрибуты:

src="" - URL-адрес файла-изображения с расширением .gif, .jpeg (.jpg), .xbm, или .png (два последних формата использовать не желательно);

alt=""  - альтернативный текст. Описание изображения выводится на место изображения до ввода изображения, а также появляется, как всплывающая подсказка, если задержать курсор мыши на изображении. Наличие этого атрибута помогает броузеру быстрее загружать страницу;

height="" , width=""  - задают высоту и ширину изображения, соответственно. (Размер изображения можно получить из редактора изображений, например, Adobe PhotoShop или Paint. Некоторые броузеры тоже показывают размер файла изображения в строке названия, если просматривать изображение само по себе, без текста).  Если загружаемое изображение больше указанных размеров, то оно уменьшается "втискиванием", а если меньше - растягивается. Можно не задавать размеры изображения, но наличие этого атрибута помогает броузеру быстрее загружать страницу;  Задается как в пикселах, так и в процентах от ширины и высоты экрана.

border=""  - задает ширину рамки вокруг изображения;

vspace="" , hspace=""  - задают расстояние по вертикали и по горизонтали от изображения до кромки текста, соответственно;

align="" - задает положение текста относительно изображения.

Значения:

top - выровнять по верху строку, следующую за изображением, 

middle - выровнять по середине строку, следующую за изображением, 

bottom - выровнять по низу строку, следующую за изображением, 

left - текст должен обтекать изображение, прижатое к левой стороне окна, 

right - текст должен обтекать изображение, прижатое к правой стороне окна. 

Если картинка лежит в поддиректории то ссылка на неё будет выглядеть так

<img src="/путь к картинке/название картинки.расширение картинки">

Для вашего удобства кладите картинку в ту же директорию, что и документ, тогда путаницы будет меньше и записывать короче

<img src="название картинки.расширение картинки">

Если картинка лежит на уровень выше, а документ находится в поддиректории, то ссылка на неё будет такой:

<img src="../ название картинки.расширение картинки">

Если картинка лежит на другом сайте, то путь прописывается полностью:

<img src="http://www.homepage.ru/my/my.jpg">

Тег этот не "контейнерный", поэтому в закрывающей части не нуждается.

Со своими атрибутами тег картинки будет выглядеть примерно так:

<img src="картинка.jpg" width="ширина картинки (необязательно)" height="ширина картинки (необязательно)" hspace="7" vspace="7" border="1" align="left">

hspace и vspace - эти теги тоже не являются обязательными, но при их наличии вокруг картинки образуется отступ в соответствующее количество пикселей от текста. Согласитесь, это намного проще, чем вымучивать эти пробелы при помощи таблиц, пробелов и слоев или же вообще лепить текст «впритык» к картинке...

Вокруг картинки при помощи border="1" можно соорудить элегантную рамочку, а при необходимости (если очень лень или по стратегическим замыслам) изменить размеры отображения картинки при помощи все тех же width и height - если указать в них меньшие размеры, чем реально у картинки, можно вписать ее в практически любой дизайн.

Зачем это нужно? Почему бы не обрезать картинку графическим редактором - что намного более практично?!

Рассмотрим минусы занижения размеров картинки при помощи HTML:

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

теперь плюсы занижения размеров:

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

Пример.


<
html>
<head>
<title>Мой первый шаг </title>
</head>
<body text="#336699" bgcolor="#000000">
<center>
<H3>Здравствуйте, это моя страница.</H3>
<br>
<font color="#CC0000"> Добро пожаловать!</font> :) </center>
<p align="justify">
<img src="primtocodephoto.gif"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :)</b>
</p>
</body>
</html>

Таким образом выглядит страничка.

Посмотрите, что у нас получилось. Не очень симпатишно, не так ли? Было бы лучше, если бы текст аккуратно располагался сбоку от картинки. Идем дальше, чтобы узнать, как это сделать.

У картинок есть параметр align:

<img src="pr1.png" align="left"> 

Это означает, что картинка будет прижата к левому краю экрана, а текст будет обтекать ее справа. Чтобы сделать наооборот (картинка справа, текст слева) надо прописать right:

<img src="pr1.png" align="right"> 

Но это не все: текст может располагаться внизу картинки (это по умолчанию) - (1), посередине - (2), и вверху - (3):

(1) - <img src="pr1.png" align="bottom">

(2) - <img src="pr1.png" align="middle">

(3) - <img src="pr1.png" align="top">

Применяем описанные выше теги.

Наша картинка будет прижата к левому краю экрана, текст будет обтекать ее справа, расстояние до текста по горизонтали - 30 пикселей, по вертикали - 5 пикселей (чтобы красиво все смотрелось), ну, и если вы наведете на картинку курсор, то выскочит надпись –

"моя фотография". 

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body text="#336699" bgcolor="#000000">

<center>

<H3>Здравствуйте, это моя первая страница.</H3>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify">

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотография"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)

</p>

</body>

</html> 

Посмотрим какие изменения произошли со страничкой.

Замечу, что картинку можно сделать фоном документа. Это прописывается в открывающем тэге <body>:

<body text="#336699" bgcolor="#000000" background="ваш_фон.jpg"> 

Параметр Background и указывет на то, где лежит фоновая картинка, в нашем примере он указывает на то, что наша фоновая картинка лежит в той же директории (папке), что и документ.  Но зачем оставлять параметр bgcolor, если есть background? А вдруг фоновая картинка не загрузится (представьте, такое может быть), тогда будет работать цвет фона.

Пример.

<html>

<head>

<title>Мой первый шаг </title>

</head>

<body bgcolor="#000000" background="1.jpg">

<center>

<H1>Здравствуйте, это моя первая страница.</H1>

<br>

<font color="#CC0000"> Добро пожаловать!</font> :) </center>

<p align="justify"><H3>

<img src="primtocodephoto.gif" align="left" HSPACE=30 VSPACE=5 alt="моя фотогра-фия"> Я совсем недавно начал(а) знакомиться с виртуальной жизнью, но мне по давней традиции тоже захотелось создать свою домашнюю страничку для моих новых виртуальных друзей и знакомых, чтобы они могли посмотреть мои фотографии, почитать обо мне, черкнуть пару строчек в мою гостевую книгу. <br><br> А может и просто случайный посетитель вдруг захочет познакомится со мной, и у меня появится <b> еще один виртуальный друг? :) </b><br><br> На фотографии изображен(а) я. Качество картинки не очень хорошее, к сожалению, поэтому она не четкая и разглядеть черты моего лица немного проблематично. Но в целом заметно, что я вполне ничего:) <br><br> Если ты так тоже думаешь, то давай как-нибудь встретимcя, поболтаем, чайку попьем в кафешке?:) Кто знает, может быть мы и в реальной жизни станем друзьями:)</H3>

</p>

</body>

</html>

Как она выглядит можно посмотреть здесь.

Задание.  

  1.  Поместить в свое резюме фотографию.
  2.  Добавить разный фон с помощью картинок ко всем ранее созданным страницам (кроме резюме).
  3.  Создать новую страницу, которая должна содержать фото вашей семьи и небольшую историю о вашей семье (это можно сделать на странице с бегущей строкой).
  4.  Создать 2-3 страницы о каждом члене вашей семьи, применяя уже полученные навыки, написав краткую информацию о ваших родственниках (использовать фото).


 

А также другие работы, которые могут Вас заинтересовать

41511. ОРГАНИЗАЦИЯ РАБОТЫ СТАНЦИОННЫХ ТЕХНОЛОГИЧЕСКИХ ЦЕНТРОВ 49.5 KB
  Назначение и размещение СТЦ и ИЦ. Операции выполняемые в СТЦ и ИЦ. Оборудование СТЦ. Назначение и размещение СТЦ и ИЦ.
41512. ОСНОВНЫЕ ПОКАЗАТЕЛИ ЭКСПЛУАТАЦИОННОЙ РАБОТЫ 100 KB
  Качественные показатели использования вагонов и локомотивов. Подача вагонов по стыковым пунктам дорог где n число стыковых пунктов; . число вагонов переданных за сутки в сумме чётного и нечётного направлений. По каждому стыковому пункту выделяют общий приём Uпр состоящий из суммы приёма гружённых и порожних а также общую сдачу складывающуюся из сдачи гружёных и порожних вагонов .
41513. Психологія особистості керівника 311 KB
  Феномен керівника в історії розвитку суспільства Мотиваційна сфера особистості керівника Труднощі вимоги та обмеження у роботі керівників Якості і риси керівника Проблема статі в управлінні Ортобіоз особистості керівника Регресивний розвиток керівника та управлінська деформація 1.Феномен керівника в історії розвитку суспільства Давні історичні політичні та соціальні вчення Єгипту Китаю Греції Риму та інших країн відображали не лише основні риси ранніх типів суспільства а й певні характерологічні особливості правителів...
41514. ПСИХОЛОГІЧНІ ЧИННИКИ ОЦІНЮВАННЯ УПРАВЛІНСЬКИХ КАДРІВ 110.5 KB
  Роль оцінювання працівників у процесі управління Соціальнопсихологічні завдання оцінювання Оцінювання за головними параметрами діяльності класифікація характеристика елементів класифікації Установки і форми поведінки керівників під час оцінювання підлеглих Характеристика сучасного менеджера управлінця 1. Роль оцінювання працівників у процесі управління Оцінювання працівників є складовою процесу управління. Головна мета оцінювання: 1.
41515. УПРАВЛІНСЬКЕ КОНСУЛЬТУВАННЯ І БІЗНЕС 79 KB
  Специфіка найму і роботи штатних та зовнішніх управлінських консультантів Головні стилі роботи консультанта. Особливості діяльності консультантів. Специфіка найму і роботи штатних та швшнініх управлінських консультантів У розвинених країнах широко використовується особливий вид діяльності управлінське консультування. Зауважимо що жодна значна перебудова у фірмах Заходу не обходилась без запрошення консультантів.
41516. Соціальні та психологічні аспекти керівництва 147 KB
  Соціальні та психологічні аспекти керівництва Кадри управління. Кадри управління. Кадри управління є складовою частиною управління ця частина системи має: відповідну кваліфікацію. Зокрема керівників залежно від профілю колективів котрі вони очолюють прийнято поділяти на лінійних та функціональних а від рівня і місця в загальній системі управління господарством на керівників відповідних ланок управління вищої середньої низової ланок.
41517. Колегіальний підхід в прийнятті управлінських рішень 177.5 KB
  Функція планування передбачає рішення про те якими повинні бути цілі організації і що повинні робити члени організації щоб досягнути цих цілей. Стратегічне планування сприяє зниженню ризику під час прийняття рішення. Вторинна інформація це дані зібрані раніше для цілей що відмінні від цілей пов'язаних з вирішенням досліджуваної проблеми. Інтерес науковців до цієї проблеми зумовлений тим що в рішеннях фіксується вся сукупність відносин котрі виникають у процесі трудової діяльності і управління організацією.
41518. Основи групової самоорганізації 124.5 KB
  Думка щодо органічності суспільства і людини виражена шведським вченим Еммануїлом Сведенборгом 1688 1772: Існує чітка функціональна подібність між людством народом і окремим індивідом. А теоцентричний представник філософського езотеризму Володимир Олексійович Шмаков 1929 доводив виказану позицію раціональними методами: Вірно виявлена загальна ідея організму однаково застосовна до людини і суспільства але в останньому вона виявляється з більшою силою і багатоманіттям.тому і заперечення того що суспільство є організмом і повне...
41519. КОНФЛІКТИ В СИСТЕМІ УПРАВЛІННЯ ПСИХОЛОГІЧНА ПІДГОТОВКА ДО НОВОВВЕДЕНЬ 180 KB
  Поняття конфлікту. Поняття інновація та нововведення Головні передумови позитивного ставлення до нововведень 1 Поняття конфлікту. Позитивний ефект конструктивного конфлікту для окремої людини може виявлятися і в тощ' що при його вирішенні відбувається усунення внутрішнього психічного напруження і як наслідок буде знайдено вихід зі стану фрустрації. Під час аналізу конфлікту дуже важливо з'ясувати справжні причини його виникнення.